diff --git a/CHANGELOG.md b/CHANGELOG.md
index d0b848d..d2f96bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,52 @@
 
 本文件记录 MoonSprite 的用户可见变化。格式参考 Keep a Changelog；开发阶段使用 `DEV`，正式发布时再归入具体 SemVer。
 
-## DEV.1
+## DEV.2
 
 ### 交互改进
+- 工具栏主按钮和顶部属性栏会立即显示当前选区或形状子工具的图标、名称与描述；全部子工具图标提前解码，并修正矩形、矩形填充、椭圆和椭圆填充图标对应关系。
+- 多边形套索在中键或 `Space` 平移画布期间保持边界预览；选区工具按住 `Shift` 或右键时，顶部组合模式临时显示加选或减选，松开后恢复原设置。
+- 首选项新增独立“工具预览”分类；“使用本地指针”明确为开启时使用系统指针、特殊场景回退 MoonSprite 指针。图层属性颜色预设改用与透明背景颜色一致的普通设置布局。
+- 文件拖入同时监听 Tauri Webview 与 Window 原生通道，单一通道失效时仍可打开 `.moonsprite`、`.ase`、`.aseprite` 和支持的图片格式。
+- 框选四角角标改为固定 CSS 线宽并保持至少 `8 x 8 px` 的视觉范围，视图缩放或悬停画布外时仍清晰显示；多边形套索使用指针源工程第 4 列第 6 行图标，并支持点击起点、双击或 `Enter` 闭合，`Esc` 取消。
+- 图层和组支持混合 `Ctrl`/`Shift` 多选及一次 `Delete` 批量删除；组与普通图层按各自选择上下文粘贴到正确层级，所有粘贴对象置于目标容器顶部。
+- 首选项新增默认开启的“直线算法优化”，Shift 连接画笔两点或建立多边形套索边界时生成长度相近的像素阶梯，预览与最终结果保持一致。
+- 所有主工具、选区子工具和形状子工具统一使用包含名称、简短用法和当前快捷键的自定义悬浮提示；多边形套索默认快捷键改为 `Shift+Q`，并一次性迁移旧版空快捷键。
+- 形状子工具替换为指针源工程第 5 行第 3 至 6 列的新图标；首选项新增全局“图层属性颜色预设”，支持新增、编辑、删除和恢复默认，所有工程共用。
+- 修复未闭合的多边形套索在中键或 `Space` 平移画布后丢失顶点的问题；修复 `Shift` 加选和右键减选期间旧蚂蚁线被隐藏的问题，单击取消只在松开且确认没有拖动后执行。
+- 修复矩形和椭圆框选按住 `Shift` 无法固定等宽高、拖动期间提前显示蚂蚁线、画布外错误显示预览像素及多边形套索双击偶发无法闭合的问题。
+- 形状固定比例保存值最多保留一位小数；大画布预览改为在最终显示阶段按主画布规则绘制棋盘格，避免降采样产生密集纹理。
+- 前景色和背景色改为所有打开工程共享；调色板选色后切换项目不再回退。颜色编辑器标题明确标注前景色/背景色，未移动时失焦关闭，拖动后常驻，并支持独立八向缩放和尺寸记忆。
+- 修复描边弹窗按 `Enter` 时全局选区命令抢先执行而导致未写入像素的问题；非矩形选区内不连续油漆桶不再越界。`Ctrl+H` 只隐藏蚂蚁线并保留八个变换点，选区拖到视口边缘时会自动平移画布。
+- 框选默认只显示当前像素四角角标；首选项可改为同时显示真正的鼠标十字指针。按住 `Shift` 加选时保持角标，进入变换命中区时隐藏角标。选区第一次移动后保持浮动，后续多次移动持续复用首次捕获的内容和背景，不污染经过区域。
+- 复制图层组后粘贴到当前选中对象的父级并与其同层，内部嵌套结构保持；多选后普通单击恢复单选。锁定对象仍可编辑名称、显示颜色和描述，但混合模式与不透明度保持冻结；未锁定组显示正确的解锁图标。
+- 图层栏标题移除“向下合并”和“解组”按钮；最末项为组时，其紧凑下边缘可作为根层最底部落点，蓝线与实际排序一致。
+- 选区工具新增当前像素格四角角标；减选和交集在已有选区内部保持选区指针。新建模式只有真实拖动才建立选区，画布内外单击不再误生成边缘 1 像素选区。
+- 新增 `Ctrl+Shift+I` 反选选区和 `Ctrl+H` 隐藏/显示蚂蚁线，分别加入“编辑”和“图层”菜单；蚂蚁线显隐不删除选区，也不进入撤销历史。
+- 前景色和背景色编辑器可同时常驻、独立拖动与关闭；通道滑条与数值框等高，尺寸限制在合理范围，关闭后重新打开回到默认位置。调整弹窗连续滑块预览按动画帧合并，减少拖动时的重复计算。
+- 修复图层拖到栏目顶部时蓝线仍显示在底部、首项为组时无法置顶、无选择新建组误收纳图层、新图层未继承当前组，以及祖先组锁定后后代仍可单独解锁的问题。
+- 修复半透明图层打开画布大小预览后视觉变亮；快捷键录入框优先接收完整多修饰键组合，不再被 MoonSprite 应用命令提前截断。
+- 图层栏移除“移到最外层”专用放置区；空组与非空组都可和普通图层统一排序并持久保持位置，新建项置顶，拖出栏目上下边界可直接移动到首尾，插入线按最终层级对齐。组和图层使用一致选中样式，眼睛、锁和组文件夹交互不再误开属性。
+- 图层属性改为操作即实时保存，关闭、遮罩或 `Esc` 不再回滚；图层选择改为 `Ctrl` 离散多选、`Shift` 连续范围选择。
+- 选区移动框只命中真实蚂蚁线；新增多边形套索、套索闭合预览偏好和右键减选，按住 `Shift` 开始选择时可绕过已有变换继续加选。
+- 形状工具新增空心矩形、空心椭圆和宽、高双输入的固定比例；自动选层移动在透明位置回退当前选中图层。
+- 亮度/对比度、色相/饱和度、色彩平衡和曲线会动态跟随选区或多选图层变化，预览切换目标时不累积旧结果，并作为一次撤销提交。
+- 所有正式弹窗统一支持拖动、边框外侧八向缩放、合理最小/最大尺寸和独立位置记忆；调整、画布大小和图像大小默认位于视图中心与右边缘之间，状态提示移到视图上方，并移除外壳的多余滚动条。外侧把手不再被弹窗裁切或把拖拽穿透到画布。
+- 修正调整、画布大小和图像大小弹窗的旧位置记忆，使弹窗中心准确落在目标点；弹窗缩小时不再出现外壳滚动条，状态提示下移以避开顶部工具属性栏。
+- 图层栏空白处可清除多选；空图层组支持 `Delete` 删除，锁定图层、锁定组及其后代禁止编辑、删除和拖动。插入预览线按实际目标父组层级缩进，拖到栏目首尾安全带可稳定放到最上方或最下方。
+- 快捷键录入支持完整多修饰键组合，不再在第一个修饰键按下时提前保存；套索新建模式区分单击取消和同像素格拖动，减选、交集可在已有选区内部直接开始，移动图层时选区同步移动。
+- 首选项将“套索选区预览闭合”默认设为关闭，并新增默认关闭的“吸管取色后切回铅笔”；色相/饱和度新增独立 HSL 明度，颜色值弹窗支持拖动和关闭，形状固定比例可交换宽高。
+- 画布最终合成改为单张连续表面输出，小中型文档按脏矩形局部刷新，超大文档按可见区域连续合成，从根源移除非整数缩放、连续绘制和半透明图层中的 128px 分块切割线；更新油漆桶工具图标。
+- 首页工程列表改为先显示文件行，再以最多 3 项并发渐进加载缩略图，并在会话内复用未变化的预览；读取失败的最近记录可单独移除且不会删除原文件，画廊删除工程继续要求二次确认。
+- `Delete`、`Ctrl+C` 和 `Ctrl+V` 现在根据最后点击或键盘聚焦的画布、图层、调色板区域执行，不再被遗留选区抢占；删除嵌套图层组会完整移除组结构并可一次撤销，拒绝删除最后一层时不再误标未保存。
+- 支持跨项目复制和粘贴多个图层及嵌套图层组，保留顺序、偏移、可见性、锁定、透明度、混合模式、显示颜色和描述，整批操作可一次撤销。
+- 弹窗 `Esc` 改为每次只关闭最上层界面；调整弹窗取消时恢复打开前状态，图层属性关闭时保留实时修改，快捷键设置只有点击“完成”才保存草稿。
+- “编辑 > 选择性粘贴”新增粘贴为新项目和粘贴为新图层；新图层默认使用 `Ctrl+Shift+V`，来源位置仍在可见视图时原位粘贴，否则放到当前视图中心。
+- 修复自由套索和多边形套索在非等长路径上进入死循环导致界面卡住的问题，已有选区内部按住 `Shift` 时同步显示组合预览。
+- 非整数缩放改为始终使用一致的分块合成路径，修复 313% 等倍率下落笔瞬间已有像素局部抖动。
+- “另存为”会读取首选项中的默认保存格式，选择 PNG、JPEG 或 WebP 时明确提示不会保留图层和工程结构。
+- 首选项重置增加统一危险确认，只清除软件配置，不删除用户创建的工程、笔刷、色板、工作区或其他磁盘文件；未完成的英语入口暂时隐藏。
+- 自定义笔刷三种模式改用统一主题下拉并补充平铺/盖章说明，详情预览恢复显示笔刷原始多色像素。
 - 调色板颜色格恢复为两套明确状态：前景色右上角、背景色左下角角标永久保留；左键或右键点击的颜色格显示临时蓝色描边，颜色格失焦后仅隐藏描边。
 - 修复热更新或焦点切换漏掉修饰键释放后，所有工具指针错误保持为吸管的问题；画布指针事件现在会重新校正 `Alt/Ctrl` 状态。
 - 修复图层栏目漏掉 `Alt` 释放事件后持续显示复制指针的问题；图层栏现在会用最新鼠标事件校正复制状态。
@@ -66,8 +109,6 @@
 - 固定前端依赖版本，避免 `latest` 引入不可预测升级。
 - 建立本地 Git 基线和 GitHub 持续集成流程。
 - 增加隔离运行的 Windows 桌面回归测试，覆盖启动、工具切换、旋转视图、高级模式、菜单与无效撤销。
-## DEV
-
 ### 维护性改进
 
 - 提取快捷键和编辑器首选项的类型化持久化边界，集中处理默认值、非法值和范围限制。
@@ -93,7 +134,16 @@
 - 新增 128、512、1024 画布的自动交互性能基准；统一画布渲染几何、缓存舞台尺寸并减少分块绘制的重复变换，连续绘制开始不再触发冗余全局刷新。
 - 性能基准新增按区域 React 提交测量；颜色、色板、图层和预览栏目改为按实际数据变化刷新，1024 画布平移、旋转后缩放和连续绘制的 React 提交耗时中位数分别下降约 24%、33% 和 18%。
 - 将文档标签、工具栏、工具属性栏、状态栏、画布主机和编辑器布局外壳从 `App.tsx` 拆分为独立刷新边界；1024 画布平移、旋转后缩放和连续绘制的 React 提交耗时相对上一阶段进一步下降约 82%、93% 和 66%。
-## 未发布
+### 本次补充修复
+
+- 修复已经通过 `Ctrl` 复制出的浮动选区无法继续复制移动的问题；每次新复制先确认当前副本，再从当前位置重新捕获内容，支持连续重复复制和逐次撤销。
+- 所有支持 `Delete` 的画布、图层、图层组和调色板删除操作同时支持 `Backspace`，文本输入中的退格不受影响。
+- 文件拖入改为统一平台服务，HTML、Webview、Window 和 Rust 通道独立订阅、统一去重；单通道失败不再拖垮其他入口，并在窗口重新获得焦点时自动重试。
+- 子工具图标改为工具栏挂载时常驻预载，选择子工具后主按钮立即切换；首选项尺寸、倍率和图层颜色预设改用组件库统一删除图标按钮，颜色框与按钮等高。
+- 修复选区描边弹窗焦点仍在画布时按 `Enter` 无响应的问题，并将描边参数作为工程设置随 `.moonsprite` 保存和恢复。
+- 修复多边形套索预览被折成矩形路径的问题，顶点之间恢复为像素直线；选区创建路径只在有效画布内显示，松开前不显示新蚂蚁线。
+- 多选图层创建组时保留最上方成员的原位置和成员顺序；粘贴图层组后同时选中全部新增组与图层。
+- 修复大画布在预览栏目缩小时透明棋盘格产生密集条纹和摩尔纹的问题。
 
 - 所有统一数值输入框支持 `+ - * /` 和括号表达式，提交后自动计算并遵守原字段范围。
 - “窗口 > 旋转视图”改为顺时针/逆时针旋转 90°，两项命令可在快捷键设置中自定义。
diff --git a/docs/README.md b/docs/README.md
index a96b733..b0c56cb 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -8,7 +8,7 @@
 - [架构概览](architecture/overview.md)：模块职责和依赖方向。
 - [状态与历史](architecture/state-history.md)：会话、dirty、撤销和视图状态。
 - [坐标与渲染](architecture/coordinates-rendering.md)：屏幕、视图、画布和图层坐标。
-- [文件格式](file-format.md)：`.moonsprite` v1 容器。
+- [文件格式](file-format.md)：`.moonsprite` v2 容器。
 
 ## 交互契约
 
diff --git a/docs/architecture/coordinates-rendering.md b/docs/architecture/coordinates-rendering.md
index 84b8578..781334a 100644
--- a/docs/architecture/coordinates-rendering.md
+++ b/docs/architecture/coordinates-rendering.md
@@ -23,6 +23,7 @@ layer -> canvas -> view rotation -> viewport -> screen
 - 视图变换的正向顺序固定为“绕同一枢轴旋转，再执行水平/垂直镜像”；缩放锚点补偿必须复用该顺序，不能在组件内自行交换矩阵步骤。
 - 像素写入使用向下取整后的文档坐标；选区手柄、边缘和旋转区命中使用未取整的连续文档坐标，禁止先取整再判断屏幕距离。输入命中与预览必须共享同一视图逆变换。
 - 画布旋转后不得出现像素内部描边、白线或图块接缝。
+- 高 DPI 工具预览的相邻文档像素必须共享同一设备像素边界；矩形边界按 `devicePixelRatio` 对齐后再换回 CSS 坐标。旋转离屏画布回绘时使用实际 backing 尺寸除以 DPR，不得把向上取整后的设备像素再次压回理论 CSS 尺寸。
 - 蚂蚁线和变换手柄使用屏幕像素绘制，缩放后保持清晰，不参与像素图层合成。
 - 画布左下角尺寸和镜像提示共用同一前景色；根据提示位置下方的合成像素、透明棋盘或工作区背景亮度选择深色或浅色，不写入文档像素。
 - 曲线调整器的直方图只从调整开始时的活动图层快照统计，作为半透明编辑辅助，不写入文档、不参与调整结果。
@@ -34,7 +35,8 @@ layer -> canvas -> view rotation -> viewport -> screen
 - `core/canvas-render-plan.ts` 统一计算反解旋转与水平/垂直镜像后的可见范围、离屏场景边界、画布原点和可见文档像素；组件不得再复制这些计算。镜像枢轴偏离视口中心时，离屏场景也必须覆盖镜像后的完整视口。
 - 调整画布尺寸预览固定按“新增区域棋盘、图层内容、旧画布外黑色遮罩、边界线”绘制，确保原本位于画布外的图层像素可见但仍明确标识为新增画布区域。
 - `CanvasStage` 的绘制尺寸由 `ResizeObserver` 缓存。指针命中仍读取实时屏幕边界，避免停靠布局变化后坐标失真。
-- `CanvasCompositeCache` 在一次分块绘制中只应用一次平移和缩放变换，tile 只负责缓存像素和提交 `drawImage`。
+- `CanvasCompositeCache` 的最终显示来源必须是一张连续表面，禁止把 128 px tile 分别缩放后直接提交到主画布。小中型文档复用完整表面并按脏矩形局部更新；超出完整表面上限的文档先把当前可见文档区域合成为单张临时表面，再用一次 `drawImage` 输出。
+- 非整数缩放、连续绘制和半透明图层必须经过同一连续表面路径。缓存分块可以作为内部计算策略，但不得成为最终显示边界，也不得在邻接处重复叠加透明像素。
 - 画布性能探针默认不工作，只有自动基准注入 `window.__moonSpriteCanvasProbe` 时才记录主绘制和指针处理耗时。
 
 任何坐标 Bug 修复都应包含未旋转、旋转、不同缩放、图层偏移和画布外内容五类测试。
diff --git a/docs/architecture/state-history.md b/docs/architecture/state-history.md
index e2b5759..cd4b1be 100644
--- a/docs/architecture/state-history.md
+++ b/docs/architecture/state-history.md
@@ -8,13 +8,14 @@ MoonSprite 状态分为四类：
 | --- | --- | --- | --- |
 | 文档内容 | 像素、图层、调色板、项目笔刷 | 工程文件 | 是 |
 | 临时编辑 | 浮动粘贴、正在绘制、变换预览 | 仅会话 | 确认后一次进入 |
-| 视图状态 | 平移、缩放、旋转、镜像、网格 | 工作区或本地设置 | 否 |
+| 视图状态 | 平移、缩放、旋转、镜像、网格、蚂蚁线显隐 | 工作区或本地设置 | 否 |
 | 应用状态 | 当前工具、弹窗、栏目布局、首页栏目 | 本地设置或工作区 | 否 |
 
 ## 历史规则
 
 - 每个历史条目必须包含恢复前后状态所需的最小数据。
 - 连续拖动、画笔笔划、复制并移动等一次手势只产生一个历史条目。
+- 移动工具同时移动图层与已有选区时，两者属于同一次手势和同一个历史条目；Undo/Redo 必须同步恢复图层偏移和选区位置。
 - 取消操作不得产生历史条目或 dirty 状态。
 - Undo/Redo 仅改变文档历史，不能撤销平移、缩放、旋转、镜像或工具切换。
 - 保存成功后记录当前历史位置为保存点；回到保存点时 dirty 应恢复为 false。
@@ -23,9 +24,14 @@ MoonSprite 状态分为四类：
 ## 临时状态提交
 
 - 浮动粘贴在切换文档、保存或开始不兼容操作前必须明确提交或取消。
-- 实时预览只改变派生显示，不反复写入历史。
+- 实时预览只改变派生显示，不反复写入历史。连续滑块输入按动画帧合并，同一帧最多计算一次，并在应用时使用最后一个输入值。
 - 调整弹窗确认时写入一次历史；取消时恢复原数据。
+- 调整快照可以包含多个目标图层及共享调色板；无选区时全部选中图层组成一个复合历史，有选区时只记录活动图层。预览期间切换选择目标必须先恢复旧快照再捕获新快照，禁止在预览结果上重复叠加。
+- 带实时预览或草稿的调整弹窗必须区分提交与取消：`Enter` 或明确确认提交一次，`Esc`、关闭按钮和遮罩取消并恢复打开前状态。图层属性是实时提交面板，每次修改立即进入文档历史，`Esc`、关闭按钮和遮罩只关闭面板并保留当前值。全局 `Esc` 使用定向关闭事件，每次只关闭当前最上层弹窗或浮层；未命中的笔刷、工具、项目标签和栏目浮层不得被顺带关闭。
+- 快捷键设置在弹窗内使用草稿；只有点击“完成”才持久化，关闭或 `Esc` 不得保存未确认修改。首选项的“应用”是唯一保存但不关闭窗口的设置命令。
 - 图层 Alt 拖动复制与最终移动共同组成一个事务。
+- 跨文档粘贴多层或嵌套图层组时，整批新增结构组成一个历史条目；一次撤销必须同时移除所有新图层和新图层组并恢复原选择。
+- 所有图层组只要具有有效 `panelOrder`，都优先以该锚点参与图层栏排序，不因组内是否有子图层而改变。拖拽更新与撤销必须同时恢复父组、组顺序、图层顺序和该锚点。
 - 从首页恢复草稿成功后必须进入对应文档会话；失败时保持恢复记录并停留在首页。
 - 已有本地路径的普通保存直接完成，不显示进度弹窗；首次保存和另存为才显示紧凑进度反馈。
 
diff --git a/docs/file-format.md b/docs/file-format.md
index 7fd71d9..03dbf63 100644
--- a/docs/file-format.md
+++ b/docs/file-format.md
@@ -2,7 +2,7 @@
 
 `.moonsprite` 是 ZIP 容器，包含：
 
-- `manifest.json`：文档元数据、调色板、图层顺序、动画时间轴和格式版本。
+- `manifest.json`：文档元数据、调色板、图层顺序、动画时间轴、选区描边设置和格式版本。
 - `layers/<id>.rgba`：小端序 RGBA 字节，每像素四字节。
 - `layers/<id>.idx32`：小端序无符号 32 位稳定调色板 ID。
 - `preview.png`：可见图层合成后的预览图。
diff --git a/docs/interactions/brush-color.md b/docs/interactions/brush-color.md
index bd34d63..e1c1584 100644
--- a/docs/interactions/brush-color.md
+++ b/docs/interactions/brush-color.md
@@ -2,19 +2,22 @@
 
 ## 颜色
 
-- 前景色和背景色是独立状态。
+- 前景色和背景色是应用级独立状态，所有已打开工程共享；在任一工程或调色板修改后，切换到其他工程不得恢复为该工程旧颜色。
 - 默认按 `X` 交换前景色与背景色；该命令可在“快捷键设置 > 颜色”中修改或清空。
 - 画笔左键使用前景色，右键使用背景色；吸管与调色盘使用同样左右键语义。
 - 拖动吸管时对应颜色实时更新。
+- 吸管工具取色后默认保持吸管；“首选项 > 编辑 > 吸管取色后切回铅笔”开启时，只在正式取色结束后切回铅笔，按住修饰键触发的临时吸色始终返回原工具。
 - 调色盘和滑条右键调整背景色时，选择点、滑条和色盘显示必须同步，色相不得跳动。
 - 色相吸附和颜色级数改变后，选择点归到当前颜色区域中心，同时保持等效颜色意图。
 - 调色板颜色格同时反映前景色和背景色：前景色使用右上角角标，背景色使用左下角角标；左键选择前景色或右键选择背景色都会给被点击的颜色格增加临时蓝色描边，颜色格失焦后只隐藏描边，右键不会改变前景色。
+- 前景色和背景色编辑器标题必须明确标注颜色角色。刚打开时属于临时弹窗，失去焦点自动关闭；标题栏发生真实拖动后转为常驻，可与另一颜色编辑器同时存在。两者分别记忆受最小/最大范围约束的尺寸，但关闭后再次打开必须回到触发按钮附近的默认位置；通道滑条与右侧数值输入框等高，并通过统一八向把手缩放。
 
 ## 笔刷类型
 
 - 基础笔刷包括方形、圆形和线条，允许调整尺寸。
 - 灰度图笔刷只输出当前颜色，灰度表示覆盖率或像素密度。
 - 程序纹理根据各自参数生成，油漆桶填充时纹理按区域规则一次生成，避免重复堆叠。
+- 油漆桶在矩形或非矩形选区中均只修改真实选区掩码包含的像素；连续与不连续模式遵守相同限制。
 - 自定义笔刷由 `Ctrl+B` 从选区创建并保存在当前项目中，使用原始尺寸，不显示尺寸参数。
 - 画笔、橡皮擦和油漆桶分别保存基础笔刷设置；非基础笔刷和笔刷模式在可用工具间共享。
 
@@ -26,6 +29,7 @@
 
 ## 图案模式
 
+- 三种模式使用统一主题下拉，并在选项内直接说明平铺原点或盖章行为；详情预览应显示自定义笔刷保存的原始多色像素，不得无条件改成单一前景色。
 - 图案与来源对齐：平铺坐标固定在笔刷来源坐标系，同一画布位置始终得到同一图案。
 - 图案与目标对齐：同样平铺，但第一笔落点作为平铺原点；预览必须与实际落点重合。
 - 油漆笔刷：以每次笔刷落点独立盖章，不要求跨落点连续平铺。
@@ -35,5 +39,6 @@
 - 预览形状和实际写入掩码必须来自同一数据。
 - 笔刷预览样式由“首选项 > 光标”控制，可选择无、仅显示边缘、完整预览或完整预览并显示边缘；是否在按住绘制时继续显示预览独立控制。
 - 画笔和橡皮擦的直线连接修饰键在快捷键设置中配置；“首选项 > 编辑”的实时预览开关只控制按住修饰键时是否显示临时线段，不改变松开后实际绘制结果。翻转内容等已确认命令必须清除旧直线锚点和预览。
+- “首选项 > 编辑 > 直线算法优化”默认开启。开启时，直线连接和多边形套索边界把主轴像素均匀分配到长度相近的阶梯段；反向连接必须得到同一像素集合，预览和最终结果必须复用同一算法。关闭后回退传统栅格直线。
 - 非基础笔刷调整参数时不得闪烁基础圆形或方形预览。
 - 指针黑白对比依据指针下最终合成画面，包括预览颜色，而不是当前图层或准备绘制的颜色。
diff --git a/docs/interactions/pointer-modifiers.md b/docs/interactions/pointer-modifiers.md
index 55246ff..c9388a0 100644
--- a/docs/interactions/pointer-modifiers.md
+++ b/docs/interactions/pointer-modifiers.md
@@ -19,6 +19,8 @@
 
 下列修饰键和笔刷尺寸命令必须在“快捷键设置”中可见。修改后，指针、提示和实际操作必须读取同一份配置。
 
+快捷键录入以一次按键会话为单位：先按下的 `Ctrl`、`Alt`、`Shift`、`Meta` 只更新预览，普通键按下后再提交完整组合；只绑定修饰键时在修饰键松开或输入框失焦时提交。录入框拥有高于应用命令分发的优先级，`Ctrl+Shift+V` 等组合不得被 MoonSprite 自身的粘贴命令提前截断。`Escape` 放弃本次录入，`Delete` 或 `Backspace` 清空绑定。
+
 | 场景 | Alt | Ctrl | Shift |
 | --- | --- | --- | --- |
 | 画笔、橡皮擦、油漆桶 | 临时吸色 | 工具定义 | 约束由工具定义 |
@@ -42,7 +44,8 @@
 - 画笔类指针热点对应实际落笔像素；偶数尺寸按当前产品规则落在右下中心像素。
 - 吸管热点位于图形有效内容的左下角。
 - 移动和复制指针热点位于视觉图形最左上角。
-- 框选绘制指针热点与预览像素中心一致。
+- 框选的四角角标属于画布预览，不改变鼠标热点；默认隐藏鼠标本体，偏好开启后使用热点位于中心的真正十字鼠标指针，不能把十字画进四角角标内部。
+- 框选工具位于画布内容边界外时仍保持选区创建指针和四角角标，不显示禁止指针；只有真实的图层不可编辑状态才显示禁止指针。
 - 旋转手柄使用对应四角指针，命中区不得与缩放手柄重叠。
 
 指针源工程使用 16×16 网格，导出为 32×32 PNG；下表坐标均以导出图片左上角为 `(0,0)`：
@@ -67,4 +70,4 @@
 
 修改指针资源或热点时必须验证 1px、2px、大尺寸笔刷，普通/旋转视图和高 DPI。
 
-本地指针资源缺少某个工具状态时，保留软件内该状态的内置回退指针，不得因为资源缺失显示空白或禁止指针。位置 5,2 的 16×16 源格为移动指针，导出后使用 32×32 资源。
+“首选项 > 光标 > 使用本地指针”开启时，普通操作使用电脑系统指针；系统没有对应语义的旋转视图和选区旋转等特殊状态继续使用 MoonSprite 内置指针。关闭时所有状态使用 MoonSprite 指针。任何资源加载失败都必须保留有效 CSS 回退，不得显示空白或错误的禁止指针。位置 5,2 的 16×16 源格为移动指针，导出后使用 32×32 资源。
diff --git a/docs/interactions/selection-transform.md b/docs/interactions/selection-transform.md
index 7905fa5..2c57536 100644
--- a/docs/interactions/selection-transform.md
+++ b/docs/interactions/selection-transform.md
@@ -2,29 +2,45 @@
 
 ## 创建选区
 
-- 矩形、椭圆、套索和魔棒共享新建、加选、减选、交集四种模式。
-- 操作期间原有蚂蚁线保持可见；松开后一次性提交组合结果。
-- 拖动预览允许超出画布，最终选区可在画布外显示蚂蚁线。
+- 矩形、椭圆、自由套索、多边形套索和魔棒共享新建、加选、减选、交集四种模式。
+- 多边形套索单击增加顶点，点击第一个顶点、双击末点或按 `Enter` 闭合并提交，按 `Esc` 取消；未闭合时可用中键或 `Space` 临时平移画布，平移期间和松开后都必须持续显示已有边与指针末段，并保留已有顶点、组合模式和原选区继续建立边界。“首选项 > 编辑 > 直线算法优化”开启时，顶点之间的预览和最终边界都使用长度相近的均匀像素阶梯。自由套索拖动预览是否默认闭合由“首选项 > 编辑”控制。
+- 右键拖动默认执行减选。按住 `Shift` 开始选择时绕过已有选区的移动、缩放和旋转命中，从选区内部也能继续加选；属性栏在按住 `Shift` 或右键时临时切换到加选或减选反馈，松开后恢复用户原本选择的组合模式。变换已经开始后，`Shift` 仍作为比例或角度约束键。
+- 创建矩形、椭圆或套索选区期间只显示画布内的新路径像素预览，不显示新选区蚂蚁线和变换点；已有选区的蚂蚁线在新建、加选、减选和交集期间保持显示，松开后再一次性显示组合结果。
+- 新建模式在已有选区外按下并松开且没有真实拖动时取消选区；按下本身不得提前取消。是否属于单击按 CSS 指针移动距离判断。即使按下与松开仍落在同一个文档像素，只要发生真实拖动，也必须提交该 1 像素选区。
+- 工具栏明确选择加选模式时，已有选区内部仍可移动内容，缩放点、旋转区和边缘移动保持可用；减选与交集从选区内部开始时优先执行组合选择。临时按住 `Shift` 加选或使用右键减选始终绕过变换命中。套索组合期间继续显示像素预览。
+- 指针允许从画布外开始并继续按文档像素网格拖动，但创建路径预览只绘制在有效画布范围内；最终选区掩码不得包含画布外像素。
 - 魔棒按住时预览全部将被选中的像素；深色像素使用浅色预览，浅色像素使用深色预览。
 - 套索路径经过的像素属于最终选区边界；闭合后的右侧和下侧不得因多边形半开判断固定缺少一列或一行。
 - `Ctrl+A` 选择整个画布范围。
+- 选区工具悬停时在当前文档像素格四角绘制紧凑直角角标，包括指针位于画布内容边界外时；此时不得改成禁止指针。角标使用固定 CSS 像素线宽，不随视图缩放变粗或变细；视觉范围最小为 `8 x 8 CSS px`，像素格更小时围绕其中心扩展。默认隐藏鼠标本体，只显示四角角标；“首选项 > 光标 > 框选时显示十字指针”开启后显示真正的鼠标十字指针，不得在角标内部额外绘制十字。按住 `Shift` 加选时保持四角角标；进入缩放、旋转或边缘移动命中区时不显示角标。
+- `Ctrl+Shift+I` 反选画布范围内的当前选区并生成一个可撤销历史步骤；没有选区时只提示用户，不创建历史。
+- `Ctrl+H` 只隐藏或显示蚂蚁线，八个变换控制点保持显示和可交互；真实选区仍参与绘制、调整和移动，该视图状态不进入文档撤销历史。
 
 ## 命中与移动
 
-- 选区内部默认移动选中内容，边缘扩展命中区用于移动选框。
+- 选区内部默认移动选中内容，只有真实蚂蚁线边界扩展命中区用于移动选框；非矩形选区的包围矩形空边不得触发移动选框。
 - 选框边缘的内外命中宽度应视觉对称，四边均可稳定触发；命中距离按连续文档坐标计算，不得因像素取整整体向右或向下偏移。
+- 创建、移动或变换选区时，指针进入或超过画布视口边缘会连续平移视图以继续操作；该平移属于视图状态，不进入文档撤销历史。
 - 变换命中优先级固定为八个白色缩放点、四角紧凑旋转区、选框边缘移动带、选区内部和普通套索区域；四个边中点使用 12 CSS px 命中半径。四个角在选区内侧保留 18 CSS px 易点击范围，在外侧象限只保留 5 CSS px（覆盖可见 `8×8` 手柄和紧邻容差），越过手柄外缘后立即旋转。旋转区到角点的最远距离为 28 CSS px，超过后必须恢复普通套索输入。所有半径严格按 CSS 像素随缩放换算，不得强制最小为一个文档像素。
 - 只有选区工具显示缩放控制点；切换画笔等绘制工具后只保留蚂蚁线，并继续把绘制限制在选区内。
 - 指针进入缩放、边缘移动或旋转交互区时隐藏像素预览，避免两个操作提示重叠。
 - 完整选择整个画布时仍允许移动内容。
+- 选区内容第一次开始移动时进入浮动状态并捕获稳定的内容与背景来源；只要选区尚未确认或取消，后续任意次数移动都从第一次来源重建并恢复经过区域的原背景，不得把移动后的目标区域重新采入来源。
+- 移动工具移动当前图层或多选图层时，已有选区与图层使用同一位移；一次撤销或重做必须同时恢复图层偏移和选区位置。
 - `Shift` 约束水平或垂直方向，并根据相对位移动态选择主轴。
-- `Ctrl` 拖动选区内容进行复制；一次 Undo 同时撤销复制和移动。
+- `Ctrl` 拖动选区内容进行复制；普通移动或已经复制出的浮动内容都可再次按住 `Ctrl`，先确认当前位置，再从该位置开始新一次复制移动；每次已确认的复制移动由一次 Undo 撤销。
+
+## 描边
+
+- `Shift+O` 打开选区描边。弹窗打开期间 `Enter` 始终优先应用描边并关闭弹窗，即使键盘焦点仍停留在画布；不得把同一次按键解释为确认选区。
+- 描边颜色、宽度、位置、像素方向、快捷形状和实时预览开关属于当前工程设置，成功应用后随 `.moonsprite` 保存并在下次打开工程时恢复。
 - `Alt` 保留临时吸色，不用于选区复制。
 
 ## 缩放与旋转
 
 - 四角缩放手柄始终可见且位于内容上层。
 - 拖动缩放点时，`Shift` 固定原始宽高比，`Ctrl` 将宽高分别吸附到原始像素尺寸的整数倍；同时按住两者时按原始比例进行整数硬边缘倍数缩放，不对单位像素做插值模糊。缩放点操作不得因 `Ctrl` 复制选区内容。
+- 使用矩形或椭圆框选工具创建选区时，按住 `Shift` 固定为等宽高；该约束必须同时作用于拖动预览与松开后的选区。
 - 旋转命中区位于四角外侧，与缩放手柄分离。
 - 旋转命中区不显示额外蓝色控制点。四角旋转区紧邻斜向缩放区，并限制在角点周围 28 CSS px 内；离开外侧 5 CSS px 斜向缩放区后立即进入旋转，不留默认指针空带。超过紧凑旋转区后恢复普通套索输入，使已有选区周边仍可继续框选。
 - 旋转选区时按住 `Shift` 将角度吸附到每 45° 一个方向，即 0°、45°、90° 等八向角度；松开后恢复连续旋转。
diff --git a/docs/product/behavior.md b/docs/product/behavior.md
index 90232cc..0a74e52 100644
--- a/docs/product/behavior.md
+++ b/docs/product/behavior.md
@@ -6,11 +6,12 @@
 
 - 用户可同时打开多个项目，并在顶部项目栏切换或复制视图。
 - 顶部“窗口”菜单集中管理视图辅助、栏目显示和工具栏位置；栏目布局修改实时保存到当前工作区。
-- `.moonsprite` 保存完整项目状态，并可通过文件选择、Windows 文件关联或从资源管理器拖入打开；拖入成功后必须直接进入对应编辑器，不得仍停留在首页。
+- `.moonsprite` 保存完整项目状态，并可通过文件选择、Windows 文件关联或从资源管理器拖入打开；拖入统一经过平台服务，HTML、Tauri Webview、Window 与 Rust 窗口事件互为兜底，单个通道失效时在窗口重新获得焦点后重试。所有通道共用格式过滤和路径去重，拖入成功后必须直接进入对应编辑器，不得仍停留在首页。
 - `.ase` 与 `.aseprite` 可通过文件选择、拖放和文件关联打开；保存或导出必须遵循用户明确选择的格式。
 - PNG、JPEG、WebP、BMP 与 GIF 可通过文件选择或拖放作为单层像素文档打开；GIF 当前读取第一帧。图片导入后保留来源路径，但不会覆盖原图片，首次保存仍按用户选择的工程或图片格式执行。
 - 从文件关联启动时应直接进入目标工程，不应只停留在首页。
-- 打开或保存的 `.moonsprite`、`.ase`、`.aseprite`、PNG、JPEG、WebP、BMP 与 GIF 进入最近列表；首页和“文件 > 最近打开文件”始终显示真实文件名及后缀，找不到或无法解析的记录在用户打开失败后移除。
+- 打开或保存的 `.moonsprite`、`.ase`、`.aseprite`、PNG、JPEG、WebP、BMP 与 GIF 进入最近列表；首页和“文件 > 最近打开文件”始终显示真实文件名及后缀。找不到或无法解析的文件保留原文件和最近记录，并显示“从最近移除”供用户明确处理；画廊中的“删除工程”是独立危险操作，必须二次确认后才删除磁盘文件。
+- 首页先显示完整文件列表，再以最多 3 个任务并发渐进读取缩略图；单项读取失败不得阻塞其他项目。已成功解码的缩略图在当前软件会话内按文件路径和记录时间缓存，栏目刷新时复用未变化结果。
 - 打开新建工程弹窗时，如果系统剪贴板包含图片，应立即读取图片头部宽高并填入尺寸；此步骤不得解码或跨进程传输整张像素数据。
 - 异常关闭工程进入恢复栏目；用户明确放弃后不得反复提示或自动恢复。
 
@@ -20,15 +21,26 @@
 - 画布平移、缩放、旋转视图、面板布局和工具切换不是文档编辑，不得改变 dirty 状态。
 - 无可撤销操作时按 `Ctrl+Z` 不得把工程标记为未保存。
 - 一个用户动作应对应一个历史步骤，例如复制图层并移动后一次撤销应整体撤销。
+- `Delete`、`Backspace`、`Ctrl+C` 和 `Ctrl+V` 根据用户最后点击或键盘聚焦的画布、图层或调色板区域执行；`Backspace` 与当前可用的删除操作等价，文本输入中仍保留正常退格。遗留选区不得抢占图层和调色板命令。跨项目复制单层、多层或图层组时保留顺序、偏移、图层属性和父子组结构。粘贴图层组时放到当前选中对象的父级；粘贴普通图层时，选中组则放入组内，选中图层则与该图层同级，没有选择则放到根层。所有粘贴对象位于目标容器最上方，粘贴完成后整批图层和图层组都进入选中状态，整批粘贴或删除只产生一个撤销步骤。
 
 ## 图层与选区
 
-- 图层和文件夹支持嵌套、排序、拖入与拖出；插入预览必须准确表示最终层级。
+- 图层和文件夹支持嵌套、统一排序、拖入与拖出；所有组都使用持久排序锚点，允许夹在普通图层之间并在保存重开后保持。新建图层和图层组位于当前容器顶部；多选图层创建组时，新组占据所选图层中最上方图层的原位置，并保留成员原有上下顺序；选中组或组内图层时，新图层创建在对应组内；没有选择任何图层或组时，新建组必须为空。拖出图层栏上方或下方时分别落到根层最上方或最下方，顶部和底部蓝线与最终落点必须使用同一目标，即使首项或末项为组也允许放到组外。插入预览线的左边必须与最终层级对齐。图层与图层组使用相同的选中背景；眼睛、锁和组文件夹拥有独立交互区，不得误触属性面板。栏目标题只保留新建图层、新建组和删除，合并与解组从菜单执行。
+- 图层选择使用 Photoshop 式修饰键：`Ctrl` 在图层和组之间离散增减选，`Shift` 从最近选择锚点到目标对象按当前完整图层树的可见行执行连续范围选择，范围内的图层和组都进入选择。多选后普通单击任意图层或组会清除多选并只选择该项；`Delete` 一次删除全部选中图层、选中组及组内后代，并由一次撤销完整恢复。图层属性修改实时提交并可撤销，关闭按钮、遮罩或 `Esc` 只关闭面板，不回滚已经操作的值。
+- 点击图层栏目中不属于任何图层行的空白区域会清除多选和组选择，但保留当前活动图层。空图层组允许使用 `Delete` 删除；锁定图层、锁定组及其所有后代不得修改像素、混合模式、不透明度、结构、排序或删除，但仍允许编辑名称、显示颜色和描述。组锁定后，其所有后代显示有效锁定状态且不能单独解锁；包含任意显式锁定后代的祖先组也不得删除。
 - 调色板颜色格同时反映前景色和背景色：前景色保留右上角角标，背景色保留左下角角标；左键或右键点击颜色格时额外显示蓝色临时选中描边，颜色格失焦后只隐藏描边，角色角标和颜色角色本身不变。
-- 图层和图层组默认不带显示颜色；属性底部可选择无颜色、预设色或自定义色，设置后仅在图层行最左侧显示竖条，不改变画布像素。描述使用统一的固定尺寸多行输入，并通过自定义悬浮提示展示；两者属于可撤销并随工程保存的图层属性。
+- 前景色和背景色由整个应用共享，而不是分别存入项目标签；切换、新建或打开工程后继续使用最近选择的两种颜色。
+- 图层和图层组默认不带显示颜色；属性底部可选择无颜色、预设色或自定义色，设置后仅在图层行最左侧显示竖条，不改变画布像素。预设色由“首选项 > 图层 > 图层属性颜色预设”全局管理，支持 1 至 12 个有效且不重复的 RGB 色，应用后所有工程的图层属性面板实时使用同一组预设。描述使用统一的固定尺寸多行输入，并通过自定义悬浮提示展示；两者属于可撤销并随工程保存的图层属性。
 - 隐藏或锁定图层不可绘制，画布应显示禁止操作指针。
 - 选区可以超出画布显示，但最终像素写入遵守文档和图层边界数据规则。
-- 粘贴内容在确认前保持完整，可通过选区移动到合适位置，不应因当前画布视口而提前裁剪。
+- 主工具、选区子工具和形状子工具都使用统一自定义悬浮提示，包含工具名称、简短用法与用户当前快捷键。主工具按钮与顶部属性栏始终显示当前选中的子工具图标和名称；所有子工具图片在工具栏挂载时以不可见 DOM 图像常驻并同步解码，不得在首次选择后延迟出现。选区工具栏以单行固定显示矩形框选、椭圆框选、套索、多边形套索和魔棒；多边形套索默认使用 `Shift+Q`。五种工具共享选区组合规则；右键默认减选，按住 `Shift` 开始选择时绕过已有选区的内容变换并执行加选，属性栏在按住期间临时显示对应的加选或减选模式，松开后恢复原模式。
+- “套索选区预览闭合”默认关闭；吸管工具默认保持当前工具，只有开启“吸管取色后切回铅笔”后，正式取色才在松开时返回铅笔，临时吸色不受该偏好影响。
+- 形状工具栏以单行固定显示矩形描边、矩形填充、椭圆描边和椭圆填充，并使用指针源工程第 5 行第 3 至 6 列的对应图标。“固定比例”使用宽、高两个数值定义比例，持久值最多保留一位小数，开启后横向或纵向拖动都按主轴保持指定宽高比。
+- 移动工具开启自动选择图层后，命中其他图层的不透明像素时移动对应图层；命中透明位置时回退到当前选中图层，多选图层保持整体移动。
+- “编辑 > 调整”有选区时只作用当前图层选区，没有选区时作用全部选中图层。弹窗打开期间改变选区或图层选择，实时预览必须先恢复旧目标基线，再对新目标重新计算；最终只生成一个撤销步骤。
+- 色相/饱和度调整同时提供色相、饱和度和 HSL 明度；明度 `+100` 收敛到白色，`-100` 收敛到黑色，不得与 RGB 亮度复用同一计算语义。
+- 粘贴内容和第一次移动后的选区内容在确认前保持浮动，可继续移动到合适位置，不应因当前画布视口而提前裁剪或覆盖经过区域的原背景。“编辑 > 选择性粘贴”提供“粘贴为新项目”和“粘贴为新图层”；新图层默认使用 `Ctrl+Shift+V`。来源坐标与当前可见视图相交时保留原位，否则以当前视图中心放置。
+- 预览栏目先缓存带透明通道的作品像素，再按最终显示比例独立绘制透明棋盘格；规则与主画布一致，格子小于 `2 CSS px` 时退化为统一浅色，不得把高频棋盘纹理降采样进作品缓存而产生条纹或摩尔纹。
 
 ## 工作区与设置
 
@@ -39,9 +51,14 @@
 - 数值输入组件允许输入数字、括号及 `+ - * /` 表达式；回车或失焦后按标准运算优先级计算，再应用字段本身的最小值和最大值。
 - “文件”首选项使用一个“自动保存恢复数据”时间预设控制恢复写入；选择关闭时不得注册定时或失焦自动保存。
 - 首选项底部提供“应用”，保存当前设置但保持首选项窗口打开；“确定”保存并关闭，“取消”放弃本次未应用修改。
+- “恢复所有初始设置”必须二次确认，且只清除 MoonSprite 的本地软件配置；不得删除用户创建的工程、笔刷、色板、工作区文件或其他磁盘文件。语言切换在完整翻译资源落地前只显示简体中文，不提供无法实际生效的入口。
 - 颜色值按钮显示颜色样本、八位 HEX 和颜色角色；打开后默认进入 RGB，可切换 RGB、HSV、HSL、Gray。模式、HEX 与当前色在顶部同一行，每个通道使用一条彩色滑轨和右侧直接数值输入，所有模式均支持透明度。调色盘底部前景色/背景色与背景首选项复用同一组件。
-- “光标”首选项控制本地像素指针、光标比例、笔刷预览样式及绘制期间是否保持预览；启用本地指针时，本地没有对应操作指针则回退到软件内置指针。“背景”首选项统一控制透明棋盘格大小和并排显示的两种颜色，颜色区使用普通设置布局而不是独立栏目。“编辑”首选项控制滚轮缩放与铅笔直线实时预览。“默认缩放模式”控制缩放工具拖动时使用平滑或百分比缩放。
-- 同一表单或弹窗内存在多个文本、数字输入框时，`Tab` 和 `Shift+Tab` 分别按界面顺序向前、向后切换输入焦点。
+- 前景色和背景色的颜色值弹窗标题显示“颜色编辑 前景色/背景色”，可通过关闭按钮关闭。未移动时失焦自动关闭，标题栏真实拖动后转为常驻；两者拥有独立尺寸记忆、统一最小/最大尺寸，可八向缩放并同时打开，关闭后再次打开回到各自触发按钮附近的默认位置。调整高度时通道色条随内容区自适应，色条与数值输入框保持等高。
+- “光标”首选项中的“使用本地指针”开启时优先使用电脑系统指针，系统没有对应语义的旋转等特殊操作回退到 MoonSprite 指针；关闭时所有场景使用 MoonSprite 指针。光标比例保留在该分类。“工具预览”单独控制笔刷预览样式、绘制期间是否保持预览以及框选时是否显示真正的鼠标十字指针；十字默认关闭，此时框选只显示当前像素四角角标。“背景”首选项统一控制透明棋盘格大小和并排显示的两种颜色；“图层属性颜色预设”使用相同的普通颜色设置布局，不得伪装成独立栏目。“编辑”首选项控制滚轮缩放、铅笔直线实时预览和默认开启的“直线算法优化”；该算法同时用于画笔直线和多边形套索边界。“默认缩放模式”控制缩放工具拖动时使用平滑或百分比缩放。
+- 首选项中的尺寸预设、导出倍率预设与图层属性颜色预设统一使用组件库 `DeleteIconButton`；紧凑预设行使用 `28 px`，颜色预设与删除按钮统一使用 `34 px` 高度，并共享危险悬浮与禁用状态。
+- 同一表单或弹窗内存在多个文本、数字输入框时，`Tab` 和 `Shift+Tab` 分别按界面顺序向前、向后切换输入焦点，并默认全选新输入框内容。
+- 状态提示位于顶部工具属性栏下方的画布视图上部，与属性栏保留明确间距且不遮挡视图中央；调整、画布大小和图像大小弹窗默认位于视图中心与右侧边缘之间的中点。所有正式模态弹窗复用统一外壳，可拖动、通过边框外侧的八向把手调整大小，并记忆各自的位置和尺寸；每类弹窗设置能保持内容完整的最小尺寸与适合当前视口的最大尺寸，外壳不产生横向或重复滚动条，默认尺寸以 1080p 下不压迫画布为准。
+- 整数与非整数缩放必须使用稳定一致的画布几何和取样原点；在 313% 等非整数缩放下开始或继续绘制时，不得因切换缓存绘制路径而使已有像素发生局部跳动。
 - 顶部任一主菜单打开后，鼠标横向移入其他主菜单应直接切换并展开；没有菜单打开时，普通悬停不得自行展开菜单。
 
 ## 兼容与安全
@@ -63,3 +80,5 @@
 ## 保存
 
 尚未保存到本地的工程执行普通保存时直接进入系统保存流程，不先显示 MoonSprite 保存进度反馈。已有路径的普通保存也直接完成。显式另存为和导出都必须先等待 Windows 文件选择器返回；用户确认路径后才分别显示“正在另存为”和“正在导出”的紧凑进度反馈，取消系统弹窗时不显示进度，完成后自动关闭。
+
+“另存为”默认选择“首选项 > 文件 > 默认保存格式”。选择 PNG、JPEG 或 WebP 时必须明确提示该格式不会保留图层和工程结构；用户确认的扩展名、Windows 保存类型和实际编码格式必须一致。
diff --git a/docs/testing/performance-history.md b/docs/testing/performance-history.md
index 093ee4a..526f58a 100644
--- a/docs/testing/performance-history.md
+++ b/docs/testing/performance-history.md
@@ -11,6 +11,138 @@
 5. 没有自动基准覆盖的交互必须明确写“未覆盖”，禁止用主观流畅度代替数据。
 6. 性能优化不能改变像素结果、快捷键、撤销语义或文件兼容性。
 
+## 2026-08-04 选区浮动复制、多边形预览与预览棋盘格
+
+代码基线：`f6eb1c6` 后的当前工作树。性能等级为 P3，完整运行一次 `pnpm bench:canvas -- --full`。本轮涉及选区创建预览的画布外绘制、多边形套索直线预览、浮动选区二次复制，以及大画布预览栏的棋盘格降采样。
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 x 128 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 6.00 ms | 14.30 ms |
+| 128 x 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.10 ms | 8.20 ms |
+| 128 x 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.20 ms | 4.00 ms |
+| 128 x 128 | 连续绘制 | 3.70 ms | 0.141% | 0.60 ms | 0.40 ms | 8.10 ms | 49.90 ms |
+| 512 x 512 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 5.40 ms | 14.30 ms |
+| 512 x 512 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.60 ms | 7.00 ms |
+| 512 x 512 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.30 ms | 1.00 ms | 3.90 ms |
+| 512 x 512 | 连续绘制 | 3.70 ms | 0.141% | 0.80 ms | 0.40 ms | 11.40 ms | 92.90 ms |
+| 1024 x 1024 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.30 ms | 4.50 ms | 10.80 ms |
+| 1024 x 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 2.90 ms | 4.00 ms |
+| 1024 x 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.30 ms | 1.70 ms | 7.20 ms |
+| 1024 x 1024 | 连续绘制 | 3.70 ms | 0.140% | 0.70 ms | 0.50 ms | 7.90 ms | 74.90 ms |
+
+所有场景帧 `p95` 均为约 3.70 ms，超过 25 ms 的帧比例最高为 0.141%，主绘制 `p95` 最高 0.80 ms，指针处理 `p95` 最高 0.50 ms，均满足当前门禁。连续绘制各出现一次 49.9-92.9 ms 的环境长任务，但高频绘制、输入和帧分位数没有同步持续升高，不判定为本轮退化。基准尚未自动覆盖多边形套索逐点点击、画布外选区预览和预览栏极大画布棋盘格的视觉正确性，这三项仍需桌面使用观察。
+
+## 2026-08-04 选区角标、混合图层选择与均匀阶梯直线
+
+代码基线：`f6eb1c6` 后的当前工作树。性能等级为 P3，完整运行一次 `pnpm bench:canvas -- --full`。本轮涉及选区角标高频预览、图层与组的混合选择和批量删除、分类型粘贴层级、多边形套索，以及 Shift 直线连接的均匀阶梯算法。
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 x 128 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.70 ms | 7.20 ms |
+| 128 x 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 1.80 ms | 7.50 ms |
+| 128 x 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.10 ms | 3.80 ms |
+| 128 x 128 | 连续绘制 | 3.70 ms | 0.140% | 0.70 ms | 0.40 ms | 7.20 ms | 39.20 ms |
+| 512 x 512 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 6.90 ms | 10.70 ms |
+| 512 x 512 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.10 ms | 1.80 ms | 4.10 ms |
+| 512 x 512 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.10 ms | 4.00 ms |
+| 512 x 512 | 连续绘制 | 3.70 ms | 0.142% | 0.60 ms | 0.30 ms | 6.90 ms | 60.90 ms |
+| 1024 x 1024 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 4.70 ms | 14.40 ms |
+| 1024 x 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 1.70 ms | 3.90 ms |
+| 1024 x 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.40 ms | 0.10 ms | 1.90 ms | 3.90 ms |
+| 1024 x 1024 | 连续绘制 | 3.70 ms | 0.142% | 0.60 ms | 0.50 ms | 7.70 ms | 67.90 ms |
+
+所有场景帧 `p95` 均约为 3.70 ms，超过 25 ms 的帧比例最高为 0.142%，主绘制 `p95` 不超过 0.70 ms，指针处理 `p95` 不超过 0.50 ms。连续绘制中的单次长帧伴随 54-63 ms 环境长任务，高频分位数未同步升高，不判定为稳定退化。最终主入口为 725.95 kB、gzip 219.39 kB，较上一条完整记录 723.15 kB / 218.72 kB 分别增加约 0.39% / 0.31%，低于 5% 门禁。均匀阶梯直线的像素集合由自动测试覆盖，但实际作品中的阶梯观感、多边形套索点击节奏和高 DPI 下角标绝对粗细仍需 Windows WebView2 实机确认。
+
+## 2026-08-04 连续画布合成与浮动选区缓存修复
+
+代码基线：当前工作树。性能等级为 P3，完整运行一次 `pnpm bench:canvas -- --full`。本轮将最终画布显示改为单张连续表面，消除 128px 分块分别缩放产生的采样接缝；绘制仍按脏矩形局部刷新。同时补齐浮动选区背景缓存、选区指针、描边确认、颜色弹窗和图层组粘贴交互。
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 x 128 | 平移 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 6.60 ms | 17.90 ms |
+| 128 x 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.10 ms | 2.20 ms | 8.00 ms |
+| 128 x 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.70 ms | 14.30 ms |
+| 128 x 128 | 连续绘制 | 3.70 ms | 0.140% | 0.70 ms | 0.40 ms | 8.60 ms | 53.60 ms |
+| 512 x 512 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.90 ms | 17.90 ms |
+| 512 x 512 | 缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 2.40 ms | 3.90 ms |
+| 512 x 512 | 旋转后缩放 | 3.70 ms | 0% | 0.60 ms | 0.10 ms | 1.20 ms | 4.20 ms |
+| 512 x 512 | 连续绘制 | 3.70 ms | 0.140% | 0.60 ms | 0.50 ms | 7.80 ms | 71.40 ms |
+| 1024 x 1024 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 6.00 ms | 14.30 ms |
+| 1024 x 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.50 ms | 7.00 ms |
+| 1024 x 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.50 ms | 4.10 ms |
+| 1024 x 1024 | 连续绘制 | 3.70 ms | 0.140% | 0.60 ms | 0.40 ms | 9.40 ms | 85.70 ms |
+
+所有场景帧 `p95` 均为约 3.70 ms，超过 25 ms 的帧比例最高为 0.140%，主绘制 `p95` 不超过 0.70 ms，指针处理 `p95` 不超过 0.50 ms。连续绘制中的单次长帧与 67-78 ms 环境长任务同时出现，高频分位数未同步升高，不判定为稳定退化。最终主入口为 723.15 kB、gzip 218.72 kB，较上一条完整记录 722.75 kB / 218.53 kB 分别增加约 0.06% / 0.09%，低于 5% 门禁。浏览器已在 1600% 纯色大画布上确认不再出现规律分块接缝；4K、半透明多图层和 Windows WebView2 长时间连续绘制仍需发布前实机回归。
+
+## 2026-08-04 跨工程颜色、选区与图层交互回归
+
+代码基线：当前工作树。性能等级为 P3，完整运行一次 `pnpm bench:canvas -- --full`。本批修改覆盖跨工程共享前景色/背景色、选区边缘自动平移与隐藏轮廓、选区模式命中、非矩形选区填充、可缩放颜色弹窗，以及图层组复制粘贴和根层排序。
+
+所有场景帧 `p95` 均为约 3.70 ms，超过 25 ms 的比例为 0%-0.2%，主绘制 `p95` 最高 1.40 ms，指针处理 `p95` 最高 0.50 ms。1024 连续绘制出现一次 75.1 ms 偶发长任务，但高频分位数未同步升高，不判定为稳定退化。最终主入口为 722.75 kB、gzip 218.53 kB；仍存在既有的主包超过 500 kB 构建警告。选区边缘停留时的持续自动平移、颜色弹窗在 Windows WebView2 中的缩放手感，以及跨项目颜色同步的长期内存影响仍未被自动基准覆盖。
+
+## 2026-08-04 选区指针、图层落点与调整预览
+
+代码基线：当前工作树。性能等级为 P3，完整运行一次 `pnpm bench:canvas -- --full`。本轮涉及选区指针和覆盖层、图层拖放、独立颜色弹窗，以及调整滑块实时预览按动画帧合并。
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 6.40 ms | 14.30 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.50 ms | 0.30 ms | 2.80 ms | 7.10 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.30 ms | 1.40 ms | 7.10 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.183% | 1.00 ms | 0.50 ms | 9.30 ms | 50.00 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 6.00 ms | 17.80 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.50 ms | 0.30 ms | 2.80 ms | 7.20 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 0.60 ms | 0.20 ms | 1.80 ms | 10.70 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.154% | 1.60 ms | 0.50 ms | 10.20 ms | 92.80 ms |
+| 1024 × 1024 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 5.90 ms | 21.40 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.50 ms | 0.30 ms | 2.10 ms | 7.20 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.30 ms | 3.80 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.172% | 1.40 ms | 0.50 ms | 9.90 ms | 89.40 ms |
+
+所有场景帧 `p95` 均为约 3.70 ms，超过 25 ms 的帧比例最高为 0.183%，主绘制 `p95` 不超过 1.60 ms，指针处理 `p95` 不超过 0.50 ms。连续绘制中的单次长帧与 80 ms 环境长任务同时出现，高频分位数没有同步升高，不判定为稳定退化。最终 Web 构建主入口为 719.54 kB、gzip 217.86 kB，较上一条完整记录 715.77 kB / 216.88 kB 分别增加约 0.53% / 0.45%，低于 5% 门禁。1024 × 640 已确认选区角标、单击空操作、蚂蚁线显隐和前后景颜色弹窗同时常驻；实际指针拖拽已确认普通图层可越过带持久锚点的组到达顶端。50% 半透明画布大小预览仍需 Windows WebView2 实机确认。
+
+## 2026-08-03 高 DPI 预览与半透明分块合成修复
+
+代码基线：当前工作树。性能等级为 P3，完整运行一次 `pnpm bench:canvas -- --full`。本轮修正设备像素对齐、旋转离屏画布回绘尺寸，以及 tile gutter 重复合成，同时包含选区、图层、弹窗、快捷键和调整交互更新。
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.50 ms | 0.40 ms | 10.50 ms | 25.00 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.50 ms | 0.30 ms | 4.90 ms | 4.20 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.70 ms | 0.20 ms | 1.80 ms | 10.70 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.131% | 1.20 ms | 0.50 ms | 16.40 ms | 85.70 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 11.00 ms | 21.50 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.60 ms | 0.30 ms | 3.00 ms | 10.80 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 1.00 ms | 0.20 ms | 1.60 ms | 3.90 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.129% | 1.70 ms | 0.50 ms | 12.10 ms | 103.50 ms |
+| 1024 × 1024 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.70 ms | 14.30 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.70 ms | 3.80 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.30 ms | 7.20 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.140% | 1.30 ms | 0.40 ms | 11.00 ms | 85.70 ms |
+
+所有场景帧 `p95` 均低于 16.7 ms，超过 25 ms 的帧比例最高为 0.140%，主绘制 `p95` 不超过 1.70 ms，指针处理 `p95` 不超过 0.50 ms。连续绘制各有一次 72-96 ms 环境长任务，但帧、绘制和输入分位数没有同步持续升高，不判定为稳定退化。Web 构建主入口为 715.77 kB、gzip 216.88 kB，较最近完整记录 711.01 kB / 215.84 kB 分别增加约 0.67% / 0.48%，低于 5% 门禁。自动桌面回归因已有热更新实例触发单实例机制、隔离进程未暴露 WebView2 调试端口而未执行；4K 实机预览和半透明图层跨 128px 分块绘制仍需在真实屏幕与作品中确认。
+
+## 2026-08-03 首页、命令分发与跨项目图层剪贴板
+
+代码基线：当前工作树。性能等级为 P3，完整运行一次 `pnpm bench:canvas -- --full`。本轮主要调整首页渐进缩略图、弹窗草稿语义、编辑区域命令分发和跨项目多图层/图层组剪贴板；画布像素算法未改变。
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 6.80 ms | 21.50 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 5.50 ms | 14.30 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.80 ms | 3.70 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.140% | 1.00 ms | 0.50 ms | 11.30 ms | 42.80 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.30 ms | 14.30 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 1.90 ms | 8.00 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.40 ms | 3.90 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.140% | 1.20 ms | 0.40 ms | 11.20 ms | 67.80 ms |
+| 1024 × 1024 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 5.20 ms | 14.30 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 1.90 ms | 7.20 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 2.10 ms | 5.70 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.141% | 1.30 ms | 0.40 ms | 10.70 ms | 71.50 ms |
+
+所有场景帧 `p95` 均低于 16.7 ms，超过 25 ms 的帧比例低于 1%。512 和 1024 连续绘制各出现一次环境长任务，但与最近 `DEV.1` 候选记录的 75.0 ms / 71.3 ms 相当，且主绘制与指针处理分位数没有同步升高，不判定为稳定退化。最终 Web 构建主入口为 694.24 kB、gzip 210.87 kB，较最近发布候选的 686.74 kB / 208.83 kB 分别增加约 1.09% / 0.98%，低于 5% 门禁。首页缩略图吞吐、多图层跨项目复制峰值内存和 Windows WebView2 实机交互仍未由画布基准覆盖。
+
 ## 2026-08-03 选区修饰键与视图预览生命周期
 
 代码基线：当前工作树。性能等级为 P3，完整运行一次 `pnpm bench:canvas -- --full`。本轮将选区比例、整数倍与旋转吸附接入统一快捷键配置，并在 Undo/Redo 前同步提交尚未落入 Store 的视图预览。
@@ -273,8 +405,134 @@
 
 选区算法在无并发负载下连续三次运行，中位数为魔棒连续区域 17.42 ms、复杂选区边界 8.59 ms，较 `8c58f9b` 同机基线分别改善 4.4% 和 7.6%。主入口为 686.74 kB、gzip 208.83 kB，较上一条完整记录 686.14 kB / 208.60 kB 分别增加 0.09% / 0.11%，低于 5% 门禁。Tauri WebView2 冒烟测试与 Windows 桌面回归均通过；镜像视图、程序纹理笔刷、调色盘连续拖动、多图层合成和长期内存占用仍未被自动画布基准覆盖。
 
+### 编辑器交互体验批次验证
+
+2026-08-03 在当前工作树运行一次 P3 完整画布基准。本批修改覆盖图层排序与拖放、选区和形状工具、动态多图层调整、移动工具回退、统一数值输入，以及弹窗拖动、八向缩放和位置尺寸记忆：
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 6.40 ms | 21.50 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 2.20 ms | 14.30 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.70 ms | 0.70 ms | 1.50 ms | 7.10 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.128% | 1.20 ms | 0.50 ms | 15.50 ms | 50.00 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.70 ms | 17.70 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.20 ms | 7.10 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.60 ms | 4.00 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.141% | 1.20 ms | 0.40 ms | 12.70 ms | 75.00 ms |
+| 1024 × 1024 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.10 ms | 14.40 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.70 ms | 5.33 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.60 ms | 0.20 ms | 1.60 ms | 4.00 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.140% | 1.10 ms | 0.40 ms | 10.50 ms | 71.60 ms |
+
+所有场景帧 `p95` 均低于 16.7 ms，卡顿帧比例低于 1%，主绘制 `p95` 不超过 1.20 ms，指针处理 `p95` 不超过 0.70 ms。连续绘制出现 50-75 ms 的一次性长任务，但高频绘制、输入和 React 提交分位数没有形成持续升高，不判定为本批代码退化。主入口为 701.93 kB、gzip 213.05 kB，较上一条完整记录 686.74 kB / 208.83 kB 分别增加 2.21% / 2.02%，低于 5% 门禁。1024 × 640 与 1920 × 1080 浏览器视口已检查调整、画布大小、图像大小、首选项、快捷键和组件库弹窗；Windows WebView2 实机的弹窗拖动和缩放手感仍未被自动基准覆盖。
+
+### 选区工具与预览棋盘格修复
+
+2026-08-04 在当前工作树运行一次 P3 完整画布基准。本批修改覆盖选区创建预览、多边形套索均匀阶梯边界、工具弹出栏，以及预览栏目透明棋盘格的最终显示绘制：
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 5.80 ms | 14.30 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.70 ms | 7.20 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.70 ms | 4.00 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.140% | 0.70 ms | 0.40 ms | 9.20 ms | 53.60 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.30 ms | 10.70 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 2.20 ms | 7.60 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.60 ms | 4.00 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.141% | 0.60 ms | 0.40 ms | 9.40 ms | 78.50 ms |
+| 1024 × 1024 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.00 ms | 14.40 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.10 ms | 2.40 ms | 3.90 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.60 ms | 6.30 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.141% | 0.60 ms | 0.40 ms | 7.50 ms | 82.00 ms |
+
+所有场景帧 `p95` 均低于 16.7 ms，卡顿帧比例最高为 0.141%，主绘制 `p95` 不超过 0.70 ms，指针处理 `p95` 不超过 0.40 ms。512 和 1024 连续绘制各出现一次 73 ms 环境长任务，但帧、绘制和输入分位数没有同步持续升高，不判定为稳定退化。最终主入口为 728.55 kB、gzip 220.68 kB，较上一条完整记录 711.01 kB / 215.84 kB 分别增加约 2.47% / 2.24%，低于 5% 门禁。1024 × 640 浏览器视口已确认选区五项和形状四项单行显示、顺序正确、无溢出，并验证工具提示读取当前快捷键；多边形双击闭合、选区松开前隐藏蚂蚁线及大画布棋盘格仍需 Windows WebView2 实际操作观察。
+
+### 多边形套索平移、工具提示与图层颜色预设
+
+2026-08-04 在当前工作树运行一次 P3 完整画布基准。本批修改覆盖多边形套索平移状态恢复、选区创建期间旧蚂蚁线渲染、主工具提示、形状图标和图层颜色预设：
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 6.50 ms | 17.90 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.60 ms | 0.30 ms | 3.50 ms | 6.00 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.60 ms | 0.20 ms | 1.80 ms | 4.10 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.138% | 0.70 ms | 0.40 ms | 12.80 ms | 64.10 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.40 ms | 6.10 ms | 17.80 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 3.20 ms | 7.10 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 0.60 ms | 0.20 ms | 1.90 ms | 4.20 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.125% | 0.80 ms | 0.60 ms | 13.90 ms | 96.40 ms |
+| 1024 × 1024 | 平移 | 3.80 ms | 3.041% | 0.40 ms | 0.20 ms | 7.60 ms | 86.70 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 2.20 ms | 4.00 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.60 ms | 3.80 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.142% | 0.60 ms | 0.40 ms | 7.90 ms | 82.10 ms |
+
+所有场景帧 `p95` 均低于 16.7 ms，主绘制 `p95` 不超过 0.80 ms，指针处理 `p95` 不超过 0.60 ms。首次 1024 平移遇到一次 89 ms 系统长任务，导致卡顿帧比例暂时达到 3.041%；随后单独复测同场景为帧 `p95` 3.70 ms、卡顿帧 0%、最坏帧 10.70 ms，主绘制和输入分位数均未升高，因此判定为环境离群值而非稳定退化。主入口为 733.30 kB、gzip 221.82 kB，较上一条完整记录 728.55 kB / 220.68 kB 分别增加约 0.65% / 0.52%，低于 5% 门禁。Windows WebView2 中未闭合多边形平移、旧蚂蚁线持续显示以及 1024 × 640 首选项布局仍需实际操作观察。
+
+### 子工具呈现、套索平移预览与原生文件拖入修复
+
+2026-08-04 在当前工作树运行一次 P3 完整画布基准。本批修改统一当前子工具图标与说明，保持多边形套索在平移期间的预览，修正系统/MoonSprite 指针选择，并为文件拖入增加 Webview 与 Window 双原生来源：
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 6.10 ms | 14.20 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.10 ms | 2.90 ms | 5.93 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.20 ms | 3.90 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.141% | 0.70 ms | 0.40 ms | 7.30 ms | 46.40 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 4.60 ms | 10.70 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 2.20 ms | 3.80 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.60 ms | 3.90 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.142% | 0.60 ms | 0.40 ms | 8.30 ms | 67.90 ms |
+| 1024 × 1024 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.20 ms | 10.80 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.40 ms | 4.20 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.60 ms | 6.30 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.142% | 0.60 ms | 0.40 ms | 8.70 ms | 82.20 ms |
+
+所有场景帧 `p95` 均低于 16.7 ms，卡顿帧比例最高为 0.142%，主绘制 `p95` 不超过 0.70 ms，指针处理 `p95` 不超过 0.40 ms。512 和 1024 连续绘制分别出现一次 61 ms 和 72 ms 系统长任务，但高频帧、绘制和输入分位数没有同步升高，不判定为稳定退化。主入口为 738.26 kB、gzip 222.67 kB，较上一条完整记录 733.30 kB / 221.82 kB 分别增加约 0.68% / 0.38%，低于 5% 门禁。1024 × 640 浏览器视口已确认子工具首次展开时四个形状图标均完成解码，顶部属性栏使用当前子工具说明，“工具预览”和图层颜色预设布局无溢出；Windows 资源管理器真实拖入和按键长按反馈仍需桌面实际操作观察。
+
+### DEV.2 发布候选验证
+
+2026-08-04 对 `DEV.2` 发布候选工作树执行 P4 验证。选区算法和完整画布基准均连续运行三次，表格记录各项中位数：
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 6.40 ms | 14.30 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 2.50 ms | 3.90 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.30 ms | 4.10 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.140% | 0.60 ms | 0.40 ms | 9.10 ms | 46.50 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 6.10 ms | 14.30 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.00 ms | 3.90 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.40 ms | 4.00 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.141% | 0.60 ms | 0.40 ms | 9.40 ms | 71.50 ms |
+| 1024 × 1024 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.10 ms | 10.80 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.30 ms | 3.80 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.60 ms | 3.90 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.142% | 0.60 ms | 0.40 ms | 9.50 ms | 78.30 ms |
+
+所有场景帧 `p95` 均低于 16.7 ms，卡顿帧比例最高为 0.142%，主绘制 `p95` 不超过 0.60 ms，指针处理 `p95` 不超过 0.40 ms。512 和 1024 连续绘制的最坏帧中位数仍包含提交后的异步长任务，但高频帧、主绘制和输入分位数稳定，不判定为持续退化。选区算法三次中位数为魔棒连续区域 15.07 ms、复杂选区边界 7.76 ms，较 `8c58f9b` 同机基线分别改善约 17.3% 和 16.5%。主入口为 738.85 kB、gzip 223.56 kB，较上一条完整记录 738.26 kB / 222.67 kB 分别增加约 0.08% / 0.40%，低于 5% 门禁。Windows WebView2 启动、原生拖入、文件关联和安装版行为继续由本次桌面与安装验证覆盖。
+
 ## 开发门禁耗时
 
+### 图层、选择性粘贴与非整数缩放修复
+
+2026-08-03 在当前工作树运行一次 P3 完整画布基准。本批修改覆盖图层组排序与多选、选择性粘贴、套索预览、弹窗统一几何，以及非整数缩放时统一画布合成路径：
+
+| 画布 | 场景 | 帧 `p95` | >25 ms | 主绘制 `p95` | 指针处理 `p95` | React `p95` | 最坏帧 |
+| --- | --- | ---: | ---: | ---: | ---: | ---: | ---: |
+| 128 × 128 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.30 ms | 6.30 ms | 14.20 ms |
+| 128 × 128 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 2.60 ms | 6.30 ms |
+| 128 × 128 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.40 ms | 3.80 ms |
+| 128 × 128 | 连续绘制 | 3.70 ms | 0.140% | 0.90 ms | 0.40 ms | 9.00 ms | 53.60 ms |
+| 512 × 512 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 5.50 ms | 14.40 ms |
+| 512 × 512 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.20 ms | 2.40 ms | 3.80 ms |
+| 512 × 512 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.20 ms | 1.40 ms | 7.10 ms |
+| 512 × 512 | 连续绘制 | 3.70 ms | 0.140% | 1.10 ms | 0.40 ms | 10.10 ms | 75.10 ms |
+| 1024 × 1024 | 平移 | 3.70 ms | 0% | 0.30 ms | 0.20 ms | 6.30 ms | 17.80 ms |
+| 1024 × 1024 | 缩放 | 3.70 ms | 0% | 0.40 ms | 0.30 ms | 2.40 ms | 4.00 ms |
+| 1024 × 1024 | 旋转后缩放 | 3.70 ms | 0% | 0.50 ms | 0.10 ms | 1.30 ms | 4.50 ms |
+| 1024 × 1024 | 连续绘制 | 3.70 ms | 0.141% | 1.30 ms | 0.50 ms | 10.90 ms | 85.60 ms |
+
+所有场景帧 `p95` 均低于 16.7 ms，卡顿帧比例最高为 0.141%，主绘制 `p95` 不超过 1.30 ms，指针处理 `p95` 不超过 0.50 ms。连续绘制各有一次 50 ms 以上环境长任务，但帧分位数、主绘制和输入路径没有同步持续升高，不判定为稳定退化。最终主入口为 711.01 kB、gzip 215.84 kB，较上一条完整记录 701.93 kB / 213.05 kB 分别增加 1.29% / 1.31%，低于 5% 门禁。313% 等非整数倍率下空闲与绘制使用相同合成路径由 `canvas-composite-cache.test.ts` 覆盖；弹窗外侧把手、图层组拖出栏目顶部和自由套索非等长路径已通过 Windows WebView2 实机验证，313% 连续绘制的像素稳定性仍需用户在实际作品中观察。
+
 这些数据用于估算每次完整验证成本，不作为用户运行时性能结论。
 
 | 日期 | 代码基线 | TypeScript | 291 项测试 | Web 构建 | Rust check | 结论 |
diff --git a/docs/testing/regression-matrix.md b/docs/testing/regression-matrix.md
index c421565..f4d67b5 100644
--- a/docs/testing/regression-matrix.md
+++ b/docs/testing/regression-matrix.md
@@ -86,8 +86,13 @@
 | 撤销 | 滚轮缩放预览尚未提交时立即执行 Undo/Redo | 先同步提交当前视图预览，再撤销或重做文档操作；缩放、平移和旋转均保持不变 | `workspace.test.ts`、`view-preview-lifecycle.test.ts` |
 | 文件 | 将 `.moonsprite` 从资源管理器拖入软件 | 普通 Windows 路径和 `file://` 路径统一规范化、去重并打开工程，不被重复拖入事件吞掉 | `document-drop.test.ts`，待补桌面 E2E |
 | 文件 | 从资源管理器拖入 `.moonsprite`、`.ase`、`.aseprite` 或受支持图片 | Tauri 官方窗口拖放事件作为主入口，Drop 路径只提交一次并直接进入编辑器 | `document-drop-events.test.ts`、`document-drop.test.ts`，待补桌面 E2E |
+| 文件 | 拖入监听中有单个通道订阅失败、组件重挂载或重复上报 | HTML、Webview、Window 与 Rust 通道互为兜底；任一通道可独立工作，重复路径只打开一次，清理后可重新订阅 | `document-drop-service.test.ts`、待补桌面 E2E |
 | 预览 | 在预览窗口内将鼠标停在作品局部并滚轮缩放 | 缩放前后的同一作品像素保持在鼠标下，不再固定以预览中心放大 | `preview-geometry.test.ts` |
 | 指针 | 拖动选区的缩放或旋转变换 | 按下拖拽期间统一显示移动指针，松开后恢复命中区域对应指针 | `canvas-visuals.test.ts`，待补桌面场景 |
+| 变换 | 已通过 `Ctrl` 复制出的浮动选区再次按住 `Ctrl` 拖动 | 先提交当前副本，再从当前位置创建新副本；可连续重复，原内容与此前副本保持不变 | `canvas-input.test.ts`、Store 测试 |
+| 输入 | 当前表面支持 `Delete` 删除时按 `Backspace` | 非文本输入状态下执行相同的选区、图层、图层组或调色板删除；文本输入仍正常退格 | `command-context.test.ts`、Store 测试 |
+| 工具栏 | 从子工具弹出栏选择选区或形状工具 | 主工具按钮在同一交互帧切换到对应图标、名称和说明；所有图标在工具栏挂载时已解码 | `EditorToolRail.test.tsx` |
+| 组件库 | 首选项预设和图层颜色预设的删除操作 | 使用组件库统一删除图标按钮；默认、悬浮和禁用状态一致，图层颜色按钮与删除按钮等高 | `DeleteIconButton.test.tsx`、`PreferencesDialog.test.tsx` |
 | 菜单 | 点击打开任一顶部菜单后横向移动鼠标 | 无需再次点击即可切换并展开鼠标当前所在的其他顶部菜单 | `menu-behavior.test.ts` |
 | 菜单 | 打开“文件 > 最近打开文件” | 子栏列出全部保留的最近工程与图片，名称始终包含真实后缀，点击后使用统一文件打开路径 | `home-history.test.ts`，待补 UI |
 | 视图 | 从“窗口 > 旋转视图”执行 90° 旋转 | 顺时针与逆时针分别改变视图 90°，不切换工具、不写入文档历史，且可绑定或清空快捷键 | `shortcuts.test.ts`，待补 UI |
@@ -106,6 +111,106 @@
 | 性能 | 128、512、1024 画布平移、缩放、旋转后缩放和连续绘制 | 固定输入下输出帧分位数、>25ms 比例、主绘制与指针处理耗时；视图操作不进入撤销历史 | `scripts/canvas-performance.mjs`、`canvas-render-plan.test.ts`、`canvas-composite-cache.test.ts` |
 | 性能工具 | 统一数值输入框支持表达式后运行完整画布基准 | 按“画布宽度/画布高度”的稳定可访问名称填写尺寸，不依赖输入框内部的 `type` 实现 | `pnpm bench:canvas -- --full` |
 | 安装 | 全新用户安装与首次启动 | 无黑屏、无重复弹窗 | 发布前手动；桌面脚本使用隔离应用数据验证启动路径 |
+| 首页 | 画廊工程读取失败后点击项目 | 只重试打开并保留磁盘文件；移除记录与删除文件必须是两个明确操作，删除文件必须二次确认 | `HomeWorkspace.test.tsx` |
+| 首页 | 最近和画廊包含多个大型工程 | 文件名列表立即出现，缩略图最多 3 项并发加载并按路径与时间复用缓存；单项失败不阻塞其他项目 | `HomeWorkspace.test.tsx` |
+| 弹窗 | 调整实时预览或图层属性修改后按 `Esc` | 调整弹窗取消时恢复打开前状态；图层属性始终实时保存，关闭或 `Esc` 只隐藏属性面板 | `AdjustmentDialog.test.tsx`、`LayersPanel.test.tsx` |
+| 删除 | 画布仍有选区时在图层或调色板按 `Delete` | 根据最后操作区域删除图层、完整图层组、颜色或选区内容，不受遗留选区干扰；拒绝删除最后一层时不产生 dirty 或历史 | `command-context.test.ts`、`workspace.test.ts` |
+| 首选项 | 点击恢复所有初始设置 | 二次确认后只清除软件本地配置，不删除工程、笔刷、色板、工作区或其他用户文件 | `PreferencesDialog.test.tsx` |
+| 保存 | 首选项修改默认保存格式后打开另存为 | 弹窗默认选中配置格式；图片格式明确提示不保留工程结构 | `SaveAsDialog.test.tsx` |
+| 笔刷 | 切换三种自定义笔刷模式 | 来源对齐、目标对齐和独立盖章的说明、原始多色预览与实际绘制语义一致，并使用统一下拉组件 | `tools.test.ts`、工具属性栏组件检查 |
+| 剪贴板 | 在图层栏目复制单层、多层或图层组并跨项目粘贴 | 保留顺序、偏移、可见性、锁定、透明度、混合模式、显示颜色、描述和嵌套组结构；一次撤销删除整批粘贴内容 | `clipboard-service.test.ts`、`workspace.test.ts` |
+| 图层 | 空组、非空组、普通层和嵌套组混合排序并跨层拖拽 | 所有组遵守持久锚点并可与图层自由排序；新建项置顶；插入线与最终目标层级左侧对齐；拖出栏目顶部或底部分别显示并落到首尾 | `layer-panel-layout.test.ts`、`layer-operations.test.ts`、`workspace.test.ts` |
+| 图层 | 在眼睛、锁或组文件夹交互区单击或双击 | 只执行对应显示、锁定或折叠操作，不启动拖动、不打开图层属性 | `LayersPanel.test.tsx` |
+| 图层 | 依次点击首层与末层并使用 `Ctrl` 或 `Shift` | `Ctrl` 离散增减选；`Shift` 从选择锚点到目标按可见图层行连续范围选择，行为与 Photoshop 一致 | `workspace.test.ts`、`LayersPanel.test.tsx` |
+| 选区 | 已有非矩形选区时命中移动选框 | 只在真实蚂蚁线边界附近进入移动选框，不按包围矩形的空白边命中 | `canvas-input.test.ts` |
+| 选区 | 套索预览闭合偏好与多边形套索 | 自由套索按偏好显示闭合预览；多边形套索逐点建立边界并可闭合、取消 | `tools.test.ts`、`PreferencesDialog.test.tsx`，待补桌面场景 |
+| 选区 | 已有选区内按住 `Shift` 开始新选区，或使用右键拖动 | `Shift` 绕过变换命中并执行组合选择；右键默认减选，不被内容移动或变换抢占 | `canvas-input.test.ts`，待补桌面场景 |
+| 形状 | 绘制实心/空心矩形和椭圆并设置固定比例 | 空心模式只绘制边界；固定比例时拖动结果始终符合长短轴比例 | `tools.test.ts`、`canvas-input.test.ts` |
+| 调整 | 调整弹窗打开期间修改选区或多选图层 | 有选区时动态作用选区；无选区时动态作用全部选中图层；目标变化后实时预览重新基于原始数据计算 | `workspace.test.ts`、`AdjustmentDialog.test.tsx` |
+| 输入 | 使用 `Tab` 切换数值输入并提交四则表达式 | 新输入框内容自动全选；表达式计算结果立即提交并触发实际修改 | `form-focus.test.ts`、`NumberInput.test.tsx` |
+| 移动 | 自动选择图层开启时从透明位置拖动 | 命中其他图层内容时移动该层；透明位置回退移动当前选中图层，多选时整体移动 | `workspace.test.ts`、`canvas-input.test.ts`，待补桌面场景 |
+| 弹窗 | 打开状态提示、调整、画布大小和图像大小弹窗 | 状态提示位于视图上方；调整类弹窗位于视图中心与右侧边缘之间的中点；弹窗默认紧凑、可调整大小并记忆用户尺寸 | `ModalShell.test.tsx`、各弹窗组件测试，待补桌面视觉检查 |
+| 剪贴板 | 从“编辑 > 选择性粘贴”执行新项目或新图层 | 新项目创建独立文档；新图层使用 `Ctrl+Shift+V`，原坐标在当前可见视图内时保持原位，否则居中到可见视图 | `workspace.test.ts`、菜单组件测试 |
+| 选区 | 自由套索或多边形套索连续输入并在已有选区内部按住 `Shift` | 输入过程不阻塞界面；内部加选实时显示组合预览，提交后结果与预览一致 | `canvas-input.test.ts`、`tools.test.ts` |
+| 形状 | 开启固定比例并输入两个比例值 | 参数显示为“固定比例”，两个数值共同定义宽高比，矩形与椭圆预览和提交都遵守比例 | `tools.test.ts`、工具属性栏组件测试 |
+| 弹窗 | 打开、拖动和八向缩放不同内容量的弹窗 | 默认位于视图中心与最右侧之间的中点；把手使用边框外侧命中且不被弹窗外壳裁掉，事件不得穿透到画布；尺寸限制在各弹窗合理最小/最大范围，内部只有必要的内容滚动条 | `ModalShell.test.tsx`、1024 × 640 与 1920 × 1080 视觉检查 |
+| 渲染 | 在 313% 等非整数缩放下连续落笔 | 提交像素后画布 CSS 几何、取样原点和已绘制像素保持稳定，不出现局部像素抖动 | `canvas-render-plan.test.ts`、`canvas-visuals.test.ts`，待补桌面场景 |
+| 弹窗 | 首次或升级后打开画布大小、图像大小和编辑调整弹窗 | 弹窗中心落在视图中心与视图右边缘之间的中点；八向缩放至允许最小尺寸时外壳和正文均不出现横向或纵向滚动条 | `ModalShell.test.tsx`、1024 x 640 与 1920 x 1080 视觉检查 |
+| 偏好 | 首次打开“首选项 > 编辑” | 显示“套索选区预览闭合”且默认关闭；“吸管取色后切回铅笔”默认关闭并可持久化 | `file-preferences.test.ts`、`PreferencesDialog.test.tsx` |
+| 图层 | 多选图层后点击图层栏目空白 | 清除多选和组选择，但保留当前活动图层以便继续编辑 | `LayersPanel.test.tsx`、`workspace.test.ts` |
+| 图层 | 把图层拖入组、拖到栏目顶部或底部 | 蓝色落点线按最终父组层级缩进；顶部和底部安全带分别落到根层首位和末位，最上方为组时仍可放到组上方 | `layer-panel-layout.test.ts`、`LayersPanel.test.tsx` |
+| 图层 | 选中空组后按 `Delete`，或尝试编辑、拖动、删除锁定层与锁定组 | 空组可作为一次历史删除；锁定对象及锁定组后代拒绝内容修改、结构移动和删除，同时保留解锁入口 | `workspace.test.ts`、`LayersPanel.test.tsx` |
+| 快捷键 | 依次按住多个修饰键和普通键录入组合 | 修饰键按下期间持续显示完整组合，普通键按下后一次保存；单独修饰键在松开或失焦时保存 | `shortcuts.test.ts`、`ShortcutDialog` 组件场景 |
+| 选区 | 新建模式下在已有选区外单击或在同一文档像素内拖动 | 单击取消选区；发生实际 CSS 像素拖动时建立 1 像素选区，不因起止文档坐标相同而误判为单击 | `canvas-input.test.ts`、待补桌面场景 |
+| 选区 | 在已有选区内部使用加选、减选或交集 | 组合选择不被内容移动或变换命中抢占；套索拖动期间仍显示实际作用像素预览 | `canvas-input.test.ts`、`tools.test.ts` |
+| 移动 | 存在选区时用移动工具移动单层或多层 | 图层内容和选区按同一位移同步移动，并由一次撤销完整恢复 | `workspace.test.ts`、待补桌面场景 |
+| 形状 | 固定比例开启后点击交换按钮 | 宽高比例值立即互换，预览和后续绘制使用交换后的比例 | 工具属性栏组件测试、`canvas-input.test.ts` |
+| 调整 | 色相/饱和度中调整“明度” | 使用 HSL 明度独立调整；`+100` 趋向白色、`-100` 趋向黑色，不与亮度/对比度的 RGB 亮度混用 | `adjustments.test.ts`、`AdjustmentDialog.test.tsx` |
+| 颜色 | 打开前景色或背景色编辑弹窗后拖动标题栏并关闭 | 弹窗可在视口内拖动，右上角关闭按钮立即关闭；重新打开时从对应颜色按钮附近重新定位 | `ColorValueControl` 组件场景 |
+| 渲染 | Windows 4K 与非整数 DPR 下显示画笔、橡皮擦和选区预览 | 所有相邻预览像素共享设备像素边界，内部不出现白线、描边或接缝 | `canvas-visuals.test.ts`、DPR 1.25/1.5/2 桌面检查 |
+| 渲染 | 半透明图层参与合成时在上层跨越 128px tile 边界绘制 | gutter 仅参与缓存，不重复合成到主画布；绘制中和提交后均无横竖区块边缘闪烁 | `canvas-composite-cache.test.ts`、完整画布性能场景 |
+| 提示 | 普通模式和高级模式显示状态提示 | 提示位于工具属性栏下方的画布视图上部，不覆盖顶部属性栏 | 1024 x 640 与 1920 x 1080 视觉检查 |
+| 指针 | 选区工具悬停在任意文档像素 | 当前像素格四角显示紧凑直角角标，角标随缩放和视图变换贴合该像素，不与变换指针叠加 | `canvas-visuals.test.ts`、待补桌面场景 |
+| 选区 | 新建模式在画布内外单击，或在同一像素格内真实拖动 | 单击只取消已有选区且松开后保持选区指针；没有选区时单击为空操作；画布外不夹取到边缘；超过 CSS 阈值的同格拖动建立 1 像素选区 | `canvas-input.test.ts`、待补桌面场景 |
+| 选区 | 已有选区内使用减选或交集 | 保持选区角标指针和像素预览，不出现移动、缩放或旋转指针 | `canvas-input.test.ts`、`canvas-visuals.test.ts` |
+| 选区 | 执行反选和隐藏蚂蚁线 | 反选得到画布范围内当前选区的补集并可撤销；`Ctrl+H` 只切换蚂蚁线显示，不删除选区、不进入文档历史 | `workspace.test.ts`、`shortcuts.test.ts` |
+| 提示 | 状态提示出现在编辑器中 | 提示与顶部工具属性栏之间保留明确间距，不覆盖属性栏 | 1024 x 640 与 1920 x 1080 视觉检查 |
+| 颜色 | 同时打开前景色和背景色编辑器 | 两个独立弹窗均可常驻、拖动和关闭，标题与关闭图标对齐；修改各自颜色互不关闭或覆盖另一个实例 | `ColorValueControl.test.tsx`、待补视觉检查 |
+| 调整 | 连续拖动调整弹窗滑块 | 实时预览每帧最多重算一次，拖动保持连贯；松开或应用时使用最后数值，撤销仍只有一个条目 | `AdjustmentDialog.test.tsx`、定向交互性能检查 |
+| 图层 | 把任意图层或组拖到栏目顶部 | 顶部蓝线显示并落在根层首位；首项是组时仍可放在组上方；拖动结束后蓝线立即清除 | `layer-panel-layout.test.ts`、`LayersPanel.test.tsx` |
+| 图层 | 没有选中图层时新建组 | 创建空组，不自动收纳最上方图层 | `workspace.test.ts` |
+| 图层 | 在组或组内图层选中时新建图层 | 新图层创建在该组内并位于该容器顶部 | `workspace.test.ts` |
+| 图层 | 子层或子组锁定后删除祖先组 | 拒绝删除包含任意锁定后代的祖先组；解锁后才允许删除 | `workspace.test.ts`、`layer-operations.test.ts` |
+| 图层 | 祖先组锁定后尝试操作后代锁图标 | 所有后代有效锁定且不能单独解锁；悬浮提示明确显示锁定祖先组名称 | `LayersPanel.test.tsx`、`workspace.test.ts` |
+| 画布大小 | 半透明图层存在时打开调整画布大小预览 | 预览合成保持图层原透明度，与打开前画面一致，不因预览缓存重复合成而变亮 | `canvas-composite-cache.test.ts`、待补桌面场景 |
+| 快捷键 | 录入 `Ctrl+Shift+V` 等被系统或其他软件注册的组合 | 弹窗在捕获阶段阻止浏览器和应用命令，只记录完整组合，不被全局快捷键处理截断为修饰键 | `ShortcutDialog.test.tsx` |
+| 颜色 | 在项目 A 修改前景色或背景色后切换项目 B | 所有打开工程立即使用同一前景色和背景色；旧工程颜色字段仍可兼容读取但不再造成切换回退 | `workspace.test.ts`、调色盘组件检查 |
+| 选区描边 | 在描边弹窗按下 `Enter` | 只提交一次描边并立即关闭弹窗，不被全局快捷键或输入控件吞掉 | `OutlineDialog.test.tsx` |
+| 选区 | 框选拖到画布视口边缘，或隐藏蚂蚁线 | 拖动期间视图连续自动平移且不进入文档历史；隐藏后蚂蚁线和八个变换点全部消失，选区本身仍有效 | `canvas-input.test.ts`、`canvas-visuals.test.ts`、待补桌面场景 |
+| 选区 | 首次移动选区内容后继续往返移动 | 首次移动建立稳定源缓存，背景只恢复一次，后续位移不会把预览结果重新采入缓存 | `tools.test.ts`、待补桌面场景 |
+| 填充 | 非矩形选区内使用连续或不连续油漆桶 | 只修改选区 mask 内像素，并正确处理图层偏移和透明区域 | `tools.test.ts` |
+| 选区 | 已有选区时使用加选、减选或交集模式 | 加选模式在选区内部可移动内容；减选和交集仍执行选区运算；各模式不会整体丢失变换与预览能力 | `canvas-input.test.ts`、待补桌面场景 |
+| 指针 | 使用框选工具悬停画布像素并切换十字指针偏好 | 默认只显示四角角标；开启偏好后叠加十字，设置可持久化 | `file-preferences.test.ts`、`canvas-visuals.test.ts` |
+| 颜色弹窗 | 打开前景色或背景色编辑器并在标题栏拖动、缩放 | 标题明确显示颜色角色；未移动时失焦关闭，发生真实移动后常驻；八向缩放、尺寸记忆和内部高度自适应与统一弹窗一致 | `ColorValueControl.test.tsx`、待补视觉检查 |
+| 图层 | 复制嵌套图层组后选中另一对象并粘贴 | 粘贴组位于当前对象的父级并与其同层，复制组内部的子组和图层层级保持不变 | `clipboard-service.test.ts`、`workspace.test.ts` |
+| 图层 | 多选后普通单击任意图层或组 | 清除原多选并只选择被点击项；`Ctrl` 和 `Shift` 的多选规则保持不变 | `workspace.test.ts`、`LayersPanel.test.tsx` |
+| 图层属性 | 编辑已锁定图层或图层组 | 名称、显示颜色和描述可实时保存；混合模式和不透明度禁用且 Store 拒绝绕过修改 | `workspace.test.ts`、`LayersPanel.test.tsx` |
+| 图层 | 最末项为图层组时把根图层拖到栏目底部 | 底部安全带显示根层蓝线并把图层放到组及其成员之后；组与图层共用一致的根层边缘规则 | `layer-operations.test.ts`、`LayersPanel.test.tsx` |
+| 选区指针 | 新建/加选时按住 `Shift`，或悬停变换命中区 | 默认只显示当前像素四角角标；偏好开启后显示鼠标十字指针；变换命中区不叠加角标 | `canvas-visuals.test.ts`、待补桌面场景 |
+| 选区轮廓 | `Ctrl+H` 隐藏选区轮廓 | 只隐藏蚂蚁线，八个变换点继续显示并可命中 | 待补渲染器测试 |
+| 选区描边 | 描边弹窗内按 `Enter` | 描边写入活动图层并生成历史记录，然后弹窗关闭 | `OutlineDialog.test.tsx` |
+| 选区浮动 | 同一选区内容连续移动到已有像素上再移开 | 从第一次移动起复用原始内容和背景快照，目标背景在后续移动时完整恢复，直到确认或取消选区 | `tools.test.ts`、`workspace.test.ts` |
+| 画布合成 | 非整数缩放、半透明图层和连续绘制 | 最终画面通过单张连续表面输出，不出现 128 px 分块边界或重复透明度 | `canvas-composite-cache.test.ts`、待补 4K 桌面场景 |
+| 颜色弹窗 | 缩放颜色编辑器、关闭后重新打开 | 通道滑条与数值框等高；尺寸受美观上下限约束；每次打开恢复触发按钮附近的默认位置 | `ColorValueControl.test.tsx` |
+| 图层组粘贴 | 复制组后选中另一对象并粘贴 | 粘贴组位于当前选中对象的父级，与当前对象同层；内部嵌套结构保持 | `workspace.test.ts` |
+| 图层组锁定 | 查看未锁定与锁定组 | 未锁定显示解锁图标，锁定或继承锁定显示锁定图标 | `LayersPanel.test.tsx` |
+| 选区指针 | 在任意缩放和高 DPI 下悬停画布内外 | 四角角标使用固定 CSS 线宽，视觉范围不小于 `8 x 8 px`；画布外仍显示四角角标而不是禁止指针 | `canvas-visuals.test.ts`、待补桌面场景 |
+| 选区描边 | 描边弹窗打开时按 `Enter` | 键盘事件只提交描边弹窗，不触发全局“完成选区”，描边写入后选区保持有效 | `command-context.test.ts`、`OutlineDialog.test.tsx` |
+| 图层多选 | 从图层行按 `Shift` 范围选择到图层组，随后按 `Delete` | 范围内图层与组都显示选中；组及后代和直接选中图层一次删除、一次撤销恢复 | `workspace.test.ts`、`LayersPanel.test.tsx` |
+| 图层粘贴 | 分别粘贴图层组、单图层到组/图层/空白选择 | 组粘贴到当前对象父级；单图层按组内、图层同级、根层规则放置；所有新对象位于目标层级最顶部 | `workspace.test.ts` |
+| 多边形套索 | 连续单击顶点后点击起点、双击末点、按 `Enter` 或 `Esc` | 点击起点、双击或 `Enter` 闭合并提交，`Esc` 取消；移动指针时末段预览实时跟随 | `canvas-input.test.ts`、待补桌面场景 |
+| 直线算法 | 开启“直线算法优化”后以 `Shift` 连接两点或绘制多边形套索边界 | 主轴像素被平均分配到各阶梯，最长与最短阶梯相差不超过 1；画笔、多边形套索的预览与最终结果使用同一点列 | `pixel-line.test.ts`、`canvas-input.test.ts`、`tools.test.ts`、`file-preferences.test.ts` |
+| 选区浮动 | 移动选区内容后，在未确认的当前位置按住 `Ctrl` 再次拖动 | 先确认上一段移动，再以当前位置为来源创建副本并移动；原位置内容保留，复制拖动可继续调整 | `canvas-input.test.ts`、`workspace.test.ts` |
+| 选区描边 | 通过 `Shift+O` 打开描边且焦点仍在画布时按 `Enter` | 描边弹窗接管按键并应用一次，选区保持；成功使用的颜色、宽度、位置、方向、形状和预览开关随工程保存 | `OutlineDialog.test.tsx`、`project-format.test.ts` |
+| 多边形套索 | 逐点单击任意斜向顶点并闭合 | 已确认顶点之间显示真实直线，不生成水平/垂直矩形折线；点击起点、双击或 `Enter` 均可正常闭合 | `canvas-input.test.ts` |
+| 图层分组 | 多选不连续图层后新建组 | 新组占据所选图层中最上方图层的原显示位置，组内保持原图层顺序，未选图层相对顺序不变 | `layer-operations.test.ts` |
+| 图层组粘贴 | 粘贴包含嵌套组和多个图层的集合 | 所有新组和新图层同时显示选中，撤销恢复原选择，重做恢复完整粘贴选择 | `workspace.test.ts`、`LayersPanel.test.tsx` |
+| 选区创建 | 从画布内容边界外按住并拖入画布 | 拖动期间只在有效画布内显示像素路径，不在画布外绘制预览；松开前不显示新选区蚂蚁线，最终掩码限制在有效画布 | `canvas-visuals.test.ts`、待补桌面场景 |
+| 选区创建 | 使用矩形或椭圆框选并按住 `Shift` 拖动 | 预览和提交均保持等宽高，不因选区模式或拖动方向失效 | `canvas-input.test.ts`、待补桌面场景 |
+| 多边形套索 | 连续建立至少三个顶点后双击 | 无论浏览器 `PointerEvent.detail` 是否可靠，双击均闭合并提交；开启直线算法优化时所有边使用均匀阶梯 | `canvas-input.test.ts`、待补桌面场景 |
+| 工具栏 | 展开选区工具与形状工具 | 选区五项和形状四项始终单行、顺序与命名固定；悬浮提示包含名称、简短用法和当前快捷键 | `editor-tools.test.ts`、待补 UI |
+| 形状比例 | 输入超过一位小数的固定宽高比例 | 保存到工具状态的宽高比例均四舍五入到一位小数，界面不重新出现冗长小数 | `workspace.test.ts` |
+| 预览 | 大尺寸透明画布缩小到预览栏目 | 棋盘格与主画布一样按最终显示比例绘制，格子过小时退化为统一浅色，不把高频棋盘纹理预合成进缩略缓存 | `preview-geometry.test.ts` |
+| 多边形套索 | 未闭合时按中键或 `Space` 拖动画布 | 平移只改变视图；已建立的顶点、组合模式和原选区保持，松开后继续建立多边形 | `canvas-input.test.ts` |
+| 选区创建 | 已有选区时按 `Shift` 加选或右键减选 | 按下和拖动期间旧蚂蚁线持续显示；新路径松开后才合并显示，未拖动的单击只在新建模式取消选区 | `canvas-input.test.ts`、待补桌面场景 |
+| 工具栏 | 悬停任意主工具、选区子工具或形状子工具 | 自定义提示统一显示工具名称、简短用法和用户当前快捷键；形状工具使用指针源工程第 5 行第 3 至 6 列图标 | `editor-tools.test.ts`、待补 1024 x 640 视觉检查 |
+| 图层属性 | 在首选项中新增、修改、删除或恢复显示颜色预设 | 预设限制为 1 至 12 个有效且不重复的 RGB 色，应用后所有工程的图层属性弹窗实时使用同一组预设 | `file-preferences.test.ts`、`PreferencesDialog.test.tsx` |
+
+| 工具栏 | 切换选区或形状子工具后查看主按钮与顶部属性栏 | 主按钮立即显示当前子工具图标，名称、说明和快捷键均来自当前子工具；所有子工具图标在弹出菜单首次打开前已预解码 | `editor-tools.test.ts`、待补 UI 场景 |
+| 多边形套索 | 未闭合多边形时按中键或 `Space` 平移画布 | 平移期间与松开后都持续显示已建立边和指针末段，平移只改变视图且不清空顶点 | `canvas-input.test.ts`、待补桌面场景 |
+| 选区模式 | 选区工具中按住 `Shift` 或鼠标右键 | 属性栏临时跳转到加选或减选反馈，松开后恢复持久模式；实际组合规则与可见反馈一致 | 待补 UI 场景 |
+| 文件拖入 | 将 `.moonsprite`、`.ase`、`.aseprite` 或图片拖入桌面窗口 | Webview 与 Window 原生拖放通道任一可用即打开文件，单一通道订阅失败不影响另一通道 | `document-drop-events.test.ts`、`document-drop.test.ts` |
+| 光标首选项 | 切换“使用本地指针”并进入旋转等特殊交互 | 开启时普通场景使用系统指针、系统没有对应指针时回退 MoonSprite 指针；关闭时全部使用 MoonSprite 指针 | `cursor-theme.test.ts`、`PreferencesDialog.test.tsx` |
 
 ## 新增规则
 
diff --git a/package.json b/package.json
index afc8071..16c6e1b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moonsprite",
-  "version": "0.1.0-dev.1",
+  "version": "0.1.0-dev.2",
   "description": "An original, open-source pixel art workstation for Windows.",
   "author": "MoonSprite contributors",
   "license": "MIT",
diff --git a/scripts/desktop-regression.mjs b/scripts/desktop-regression.mjs
index e622bec..c9f713c 100644
--- a/scripts/desktop-regression.mjs
+++ b/scripts/desktop-regression.mjs
@@ -76,9 +76,9 @@ try {
     }, label)
   }
 
-  await selectTool('B', '铅笔')
-  await selectTool('V', '移动')
-  await selectTool('R', '旋转视图')
+  await selectTool('B', '铅笔工具')
+  await selectTool('V', '移动工具')
+  await selectTool('R', '旋转视图工具')
 
   const rotationInput = page.locator('input[aria-label="旋转度数"]')
   await rotationInput.waitFor({ state: 'visible' })
@@ -113,10 +113,10 @@ try {
   assert(await relativeLuminanceItem.isEnabled(), 'Relative luminance menu command is unexpectedly disabled.')
   await windowMenuButton.click()
 
-  const selectionToolButton = page.locator('.tool-rail button[aria-label="选区"]')
+  const selectionToolButton = page.locator('.tool-rail button[aria-label="矩形框选工具"]')
   await selectionToolButton.click()
   await page.locator('.selection-flyout[aria-label="选择选区方式"]').waitFor({ state: 'visible' })
-  assert(await page.locator('.selection-flyout button').count() === 4, 'Selection tool menu is incomplete.')
+  assert(await page.locator('.selection-flyout button').count() === 5, 'Selection tool menu is incomplete.')
 
   console.log('MoonSprite desktop regression test passed.')
 } finally {
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 0f680a4..05a1b10 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2116,7 +2116,7 @@ dependencies = [
 
 [[package]]
 name = "moonsprite"
-version = "0.1.0-dev.1"
+version = "0.1.0-dev.2"
 dependencies = [
  "arboard",
  "rfd",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 7fcd59a..95948a1 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "moonsprite"
-version = "0.1.0-dev.1"
+version = "0.1.0-dev.2"
 description = "An original, open-source pixel art workstation for Windows."
 authors = ["MoonSprite contributors"]
 edition = "2021"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index e7c6695..6791bf7 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "MoonSprite",
-  "version": "0.1.0-dev.1",
+  "version": "0.1.0-dev.2",
   "identifier": "art.moonpx.moonsprite",
   "build": {
     "beforeDevCommand": "pnpm dev:web",
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 962b0d3..19dce07 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1,7 +1,6 @@
 import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Check, ChevronRight, ExternalLink, FileOutput, FolderOpen, GitFork, Info, LayoutTemplate, Plus, Save, Trash2, X } from 'lucide-react'
-import { listen } from '@tauri-apps/api/event'
 import { PhysicalPosition, PhysicalSize } from '@tauri-apps/api/dpi'
 import { availableMonitors, getCurrentWindow } from '@tauri-apps/api/window'
 import type { ColorMode, ImageResizeInterpolation, StoredWorkspace, WorkspaceLayout } from '@shared/types'
@@ -26,12 +25,12 @@ import { PreferencesDialog } from '@/components/dialogs/PreferencesDialog'
 import { SaveAsDialog } from '@/components/dialogs/SaveAsDialog'
 import { ShortcutDialog } from '@/components/dialogs/ShortcutDialog'
 import { NumberInput } from '@/components/NumberInput'
+import { ModalShell } from '@/components/ModalShell'
 import { ThemedSelect } from '@/components/ThemedSelect'
-import { isPaletteDeleteKey } from '@/core/palette-layout'
+import { resolveCopyCommand, resolveDeleteCommand, shouldHandleGlobalSelectionEnter, shouldTriggerDeleteCommand, type EditorCommandScope } from '@/core/command-context'
 import { formatBytes } from '@/core/resource-policy'
 import { adjacentFormInput } from '@/core/form-focus'
-import { normalizeDroppedDocumentPaths } from '@/core/document-drop'
-import { subscribeToNativeDocumentDrops } from '@/platform/document-drop-events'
+import { startDocumentDropService } from '@/platform/document-drop-service'
 import { APP_CHANNEL_LABEL } from '@/core/app-meta'
 import { getRecentProjects, type RecentProject } from '@/core/home-history'
 import { EXPORT_FORMAT_PREFERENCE_KEY, EXPORT_SCALE_PRESETS_KEY, NEW_DOCUMENT_SIZE_PRESETS_KEY, RELATIVE_LUMINANCE_SCOPE_KEY, SAVE_FORMAT_PREFERENCE_KEY, imageExportKindForPreference, loadEditorPreferences, parseDocumentSizePresets, parseExportScalePresets, parseRelativeLuminanceScope, type RelativeLuminanceScope } from '@/core/file-preferences'
@@ -39,7 +38,7 @@ import { DEFAULT_SHORTCUTS, deriveShortcutConflicts, keyboardEventKey, loadShort
 import { readStoredJson, readStoredString, writeStoredJson, writeStoredString } from '@/core/storage'
 import { applyCursorPreferences } from '@/platform/cursor-theme'
 import { ACTIVE_WORKSPACE_STORAGE_KEY, BOTTOM_DOCK_HEIGHT_STORAGE_KEY, COLOR_SQUARE_ANCHOR_STORAGE_KEY, COLOR_SQUARE_DOCK_STORAGE_KEY, DEFAULT_PANEL_DOCKS, FLOATING_PANEL_STORAGE_KEYS, INSPECTOR_LAYOUT_STORAGE_KEY, INSPECTOR_WIDTH_STORAGE_KEY, LEFT_DOCK_WIDTH_STORAGE_KEY, PANEL_DOCKS_STORAGE_KEY, TOOL_RAIL_SIDE_STORAGE_KEY, loadBottomDockHeight, loadInspectorWidth, loadLeftDockWidth, loadMainWindowState, loadPanelDocks, loadPanelVisibility, loadToolRailSide, normalizeWorkspaceLayout, readLayoutStorage, saveMainWindowState, savePanelDocks, savePanelVisibility, writeLayoutStorage } from '@/core/workspace-layout-preferences'
-import { type ExportOptions, useWorkspace } from '@/store/workspace'
+import { type ExportOptions, type SaveAsOptions, useWorkspace } from '@/store/workspace'
 import './styles.css'
 
 const LazyHomeWorkspace = lazy(() => import('@/components/HomeWorkspace').then(({ HomeWorkspace }) => ({ default: HomeWorkspace })))
@@ -52,6 +51,12 @@ const presetStorageKey = 'moonsprite.export-presets.v1'
 type ToolRailSide = 'left' | 'right'
 type AdvancedMode = 'tool-options' | 'canvas-only'
 
+const saveAsFormatForPreference = (value: string | null): SaveAsOptions['format'] => {
+  if (value === 'ase' || value === 'aseprite' || value === 'jpeg' || value === 'webp') return value
+  if (value === 'png') return 'png-auto'
+  return 'moonsprite'
+}
+
 const defaultPanelDocks: Record<WorkspacePanelId, PanelDock> = { ...DEFAULT_PANEL_DOCKS }
 const defaultInspectorLayout = JSON.stringify({
   order: ['palette', 'color', 'layers', 'preview'],
@@ -183,6 +188,7 @@ export default function App() {
   const workspaceApplyInProgress = useRef(false)
   const workspaceAutoSaveTimer = useRef<number | null>(null)
   const workspaceAutoSaveQueue = useRef<Promise<void>>(Promise.resolve())
+  const commandScopeRef = useRef<EditorCommandScope>('canvas')
   const [workspaceLayoutChange, setWorkspaceLayoutChange] = useState(0)
   const workAreaRef = useRef<HTMLElement>(null)
   const inspectorWidthRef = useRef(inspectorWidth)
@@ -211,6 +217,19 @@ export default function App() {
       // The CSS defaults remain usable when a custom cursor image cannot be decoded.
     })
   }, [runtimePreferences.cursorScale, runtimePreferences.useLocalCursors])
+  useEffect(() => {
+    const rememberCommandScope = (event: Event): void => {
+      const surface = (event.target as HTMLElement | null)?.closest<HTMLElement>('[data-command-scope], .stage-surface')
+      const scope = surface?.classList.contains('stage-surface') ? 'canvas' : surface?.dataset.commandScope
+      if (scope === 'canvas' || scope === 'layers' || scope === 'palette') commandScopeRef.current = scope
+    }
+    window.addEventListener('pointerdown', rememberCommandScope, true)
+    window.addEventListener('focusin', rememberCommandScope, true)
+    return () => {
+      window.removeEventListener('pointerdown', rememberCommandScope, true)
+      window.removeEventListener('focusin', rememberCommandScope, true)
+    }
+  }, [])
   useEffect(() => {
     const enabled = Boolean(session?.view.relativeLuminance && relativeLuminanceScope === 'app')
     document.body.classList.toggle('relative-luminance-app', enabled)
@@ -672,44 +691,11 @@ export default function App() {
   }, [])
 
   useEffect(() => {
-    let active = true
-    let removeNativeListener: (() => void) | null = null
-    let removeWindowDropListener: (() => void) | null = null
-    const recentlyOpened = new Set<string>()
-    const openDroppedPaths = (paths: string[]): void => {
-      for (const path of normalizeDroppedDocumentPaths(paths)) {
-        const key = path.toLowerCase()
-        if (recentlyOpened.has(key)) continue
-        recentlyOpened.add(key)
-        window.setTimeout(() => recentlyOpened.delete(key), 1_000)
-        void useWorkspace.getState().openPath(path).then((opened) => {
-          if (active && opened) setHomeOpen(false)
-        })
-      }
-    }
-    const dragOver = (event: DragEvent): void => event.preventDefault()
-    const drop = (event: DragEvent): void => {
-      event.preventDefault()
-      openDroppedPaths([...event.dataTransfer?.files ?? []].map((file) => window.moonSprite.pathForFile(file)).filter(Boolean))
-    }
-    window.addEventListener('dragover', dragOver, true)
-    window.addEventListener('drop', drop, true)
-    if ('__TAURI_INTERNALS__' in window) {
-      void subscribeToNativeDocumentDrops(getCurrentWindow(), openDroppedPaths).then((remove) => {
-        removeWindowDropListener = remove
-        if (!active) remove()
-      }).catch(() => {})
-      void listen<string[]>('app:file-drop', (event) => {
-        if (active) openDroppedPaths(event.payload)
-      }).then((remove) => { removeNativeListener = remove; if (!active) remove() })
-    }
-    return () => {
-      active = false
-      removeNativeListener?.()
-      removeWindowDropListener?.()
-      window.removeEventListener('dragover', dragOver, true)
-      window.removeEventListener('drop', drop, true)
-    }
+    return startDocumentDropService({
+      openPath: (path) => useWorkspace.getState().openPath(path),
+      pathForFile: (file) => window.moonSprite.pathForFile(file),
+      onOpened: () => setHomeOpen(false)
+    })
   }, [])
 
   useEffect(() => {
@@ -792,6 +778,8 @@ export default function App() {
   useEffect(() => {
     const keydown = (event: KeyboardEvent): void => {
       const key = keyboardEventKey(event).toLowerCase()
+      const target = event.target as HTMLElement | null
+      if (shortcutOpen && key !== 'escape' && target?.dataset.shortcutRecorder === 'true') return
       const matches = (action: string): boolean => {
         if (blockedShortcuts[action as keyof typeof blockedShortcuts]) return false
         const configured = shortcuts[action]
@@ -799,16 +787,30 @@ export default function App() {
         return expected !== '' && normalizeShortcut(shortcutText(event)).toLowerCase() === normalizeShortcut(expected).toLowerCase()
       }
       if (key === 'escape') {
+        const hasPaletteSurface = Boolean(document.querySelector('.palette-operation-dialog, .palette-library-popover, .palette-actions-popover, .palette-library-context'))
         const hasOwnedPopover = Boolean(document.querySelector('.document-tab-context-menu, .tool-flyout, .brush-library, .brush-size-popover, .brush-advanced-settings [aria-expanded="true"]'))
-        const hasTransientSurface = Boolean(workspace.dialog || workspace.saveProgress || newOpen || canvasResizeOpen || imageResizeOpen || outlineOpen || preferencesOpen || shortcutOpen || adjustmentOpen || aboutOpen || componentLibraryOpen || exportOpen || saveAsOpen || workspaceSaveOpen || workspaceManagerOpen || openMenu || hasOwnedPopover)
         const dialogChoice = workspace.dialog?.choices.find((choice) => choice.id === 'cancel')?.id ?? workspace.dialog?.choices.find((choice) => choice.tone === 'quiet')?.id
         if (workspace.dialog && dialogChoice) workspace.resolveDialog(dialogChoice)
-        if (workspace.saveProgress) workspace.dismissSaveProgress()
-        window.dispatchEvent(new Event('moonsprite:close-dialog'))
-        setNewOpen(false); setCanvasResizeOpen(false); setImageResizeOpen(false); setOutlineOpen(false); setPreferencesOpen(false); setShortcutOpen(false); setAdjustmentOpen(false); setAboutOpen(false); setComponentLibraryOpen(false); setExportOpen(false); setSaveAsOpen(false); setWorkspaceSaveOpen(false); setWorkspaceManagerOpen(false)
-        setOpenMenu(null)
-        if (session?.pendingPaste) workspace.cancelFloatingPaste()
-        else if (!hasTransientSurface) workspace.setSelection(null)
+        else if (workspace.saveProgress) workspace.dismissSaveProgress()
+        else if (adjustmentOpen) window.dispatchEvent(new CustomEvent('moonsprite:close-dialog', { detail: { target: 'adjustment' } }))
+        else if (document.querySelector('.layer-modal')) window.dispatchEvent(new CustomEvent('moonsprite:close-dialog', { detail: { target: 'layers' } }))
+        else if (hasPaletteSurface) window.dispatchEvent(new CustomEvent('moonsprite:close-dialog', { detail: { target: 'palette' } }))
+        else if (newOpen) setNewOpen(false)
+        else if (canvasResizeOpen) setCanvasResizeOpen(false)
+        else if (imageResizeOpen) setImageResizeOpen(false)
+        else if (outlineOpen) setOutlineOpen(false)
+        else if (preferencesOpen) setPreferencesOpen(false)
+        else if (shortcutOpen) setShortcutOpen(false)
+        else if (aboutOpen) setAboutOpen(false)
+        else if (componentLibraryOpen) setComponentLibraryOpen(false)
+        else if (exportOpen) setExportOpen(false)
+        else if (saveAsOpen) setSaveAsOpen(false)
+        else if (workspaceSaveOpen) setWorkspaceSaveOpen(false)
+        else if (workspaceManagerOpen) setWorkspaceManagerOpen(false)
+        else if (openMenu) setOpenMenu(null)
+        else if (hasOwnedPopover) window.dispatchEvent(new CustomEvent('moonsprite:close-dialog', { detail: { target: 'popover' } }))
+        else if (session?.pendingPaste) workspace.cancelFloatingPaste()
+        else workspace.setSelection(null)
         event.preventDefault()
         event.stopPropagation()
         return
@@ -819,25 +821,18 @@ export default function App() {
           event.preventDefault()
           event.stopPropagation()
           nextInput.focus()
+          nextInput.select()
           return
         }
       }
+      if (key === 'enter' && outlineOpen) return
       if (key === 'alt') event.preventDefault()
       const commandKey = event.ctrlKey || event.metaKey
-      const target = event.target as HTMLElement | null
       const inputType = target?.tagName === 'INPUT' ? (target as HTMLInputElement).type : ''
       const isTextEntry = Boolean(target?.isContentEditable)
         || target?.tagName === 'TEXTAREA'
         || target?.tagName === 'SELECT'
         || (target?.tagName === 'INPUT' && !['range', 'number', 'checkbox', 'radio', 'button', 'submit', 'reset'].includes(inputType))
-      if (target?.closest('[data-palette-id]') && isPaletteDeleteKey(event.key)) {
-        event.preventDefault()
-        event.stopPropagation()
-        const state = useWorkspace.getState()
-        const active = state.sessions.find((item) => item.document.id === state.activeId)
-        if (active?.selectedPaletteIds.length) state.deletePaletteColors(active.selectedPaletteIds)
-        return
-      }
       if (matches('advancedMode')) {
         event.preventDefault()
         event.stopPropagation()
@@ -894,9 +889,10 @@ export default function App() {
         state.setTool('selection')
         state.setSelection({ x: 0, y: 0, width: active.document.width, height: active.document.height })
       })) return
+      if (runCommand('invertSelection', () => workspace.invertSelection())) return
       if (runCommand('createBrushFromSelection', () => {
-        if (session?.tool === 'selection' && session.selection) workspace.createBrushFromSelection()
-        else workspace.setMessage('请先使用选区工具选择要作为笔刷的内容。')
+        if (session?.selection) workspace.createBrushFromSelection()
+        else workspace.setMessage('请先创建要作为笔刷的选区。')
       })) return
       if (runCommand('deselect', () => {
         if (session?.pendingPaste) workspace.commitFloatingPaste()
@@ -908,9 +904,23 @@ export default function App() {
       if (runCommand('exportDocument', openExport)) return
       if (runCommand('closeDocument', () => { if (workspace.activeId) void workspace.closeDocument(workspace.activeId) })) return
       if (runCommand('openProjectFolder', () => { if (session) openProjectFolder(session.document.id) })) return
-      if (runCommand('copy', () => { if (session && !session.selection && !session.selectedGroupId && session.selectedLayerIds.length === 1) workspace.copyActiveLayerToClipboard(); else workspace.copySelection() })) return
+      if (runCommand('copy', () => {
+        const target = resolveCopyCommand(commandScopeRef.current, Boolean(session?.selection))
+        if (target === 'layers') workspace.copySelectedLayersToClipboard()
+        else if (target === 'selection') workspace.copySelection()
+        else if (commandScopeRef.current === 'palette') workspace.setMessage('调色板颜色暂不支持复制。')
+        else if (session?.selectedLayerIds.length || session?.selectedGroupIds.length) workspace.copySelectedLayersToClipboard()
+        else workspace.setMessage('请先选择要复制的内容。')
+      })) return
       if (runCommand('cut', () => workspace.cutSelection())) return
-      if (runCommand('paste', () => { if (!session?.selection && workspace.pasteLayerFromClipboard()) return; void workspace.pasteSelection() })) return
+      if (runCommand('paste', () => {
+        if (commandScopeRef.current === 'layers' && workspace.pasteLayersFromClipboard()) return
+        if (commandScopeRef.current === 'palette') { workspace.setMessage('调色板区域暂不支持粘贴。'); return }
+        if (!session?.selection && workspace.pasteLayersFromClipboard()) return
+        void workspace.pasteSelection()
+      })) return
+      if (runCommand('pasteAsNewLayer', () => { void workspace.pasteAsNewLayer() })) return
+      if (runCommand('pasteAsNewDocument', () => { void workspace.pasteAsNewDocument() })) return
       if (runCommand('swapForegroundBackground', () => workspace.swapPrimarySecondaryColors())) return
       const adjustmentShortcuts: Array<[string, AdjustmentKind]> = [
         ['adjustmentColorBalance', 'color-balance'],
@@ -942,6 +952,7 @@ export default function App() {
       if (runCommand('mirrorView', () => { if (session) toggleMirrorView('horizontal') })) return
       if (runCommand('mirrorViewVertical', () => { if (session) toggleMirrorView('vertical') })) return
       if (runCommand('toggleGrid', () => { if (session) workspace.toggleGrid() })) return
+      if (runCommand('toggleSelectionOutline', () => { if (session) workspace.toggleSelectionOutline() })) return
       if (runCommand('rotateViewClockwise90', () => { if (session) workspace.setView({ rotation: (session.view.rotation + 90) % 360 }) })) return
       if (runCommand('rotateViewCounterClockwise90', () => { if (session) workspace.setView({ rotation: (session.view.rotation + 270) % 360 }) })) return
       if (runCommand('resetView', () => { if (session) workspace.setView({ zoom: 16, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false }) })) return
@@ -955,9 +966,10 @@ export default function App() {
       if (runCommand('openAbout', () => setAboutOpen(true))) return
       if (runCommand('magic', () => { workspace.setTool('selection'); workspace.setSelectionKind('magic') })) return
       if (runCommand('lasso', () => { workspace.setTool('selection'); workspace.setSelectionKind('lasso') })) return
+      if (runCommand('polygonLasso', () => { workspace.setTool('selection'); workspace.setSelectionKind('polygon-lasso') })) return
       if (runCommand('tool.selection.ellipse', () => { workspace.setTool('selection'); workspace.setSelectionKind('ellipse') })) return
       if (runCommand('tool.selection', () => { workspace.setTool('selection'); workspace.setSelectionKind('rectangle') })) return
-      if (event.key === 'Enter' && session?.selection) {
+      if (event.key === 'Enter' && session?.selection && shouldHandleGlobalSelectionEnter(outlineOpen, true)) {
         event.preventDefault()
         if (session.pendingPaste) workspace.commitFloatingPaste()
         const active = useWorkspace.getState().sessions.find((item) => item.document.id === session.document.id)
@@ -971,10 +983,13 @@ export default function App() {
         if (!event.repeat) workspace.setTool(tool.id)
         return
       }
-      if (matches('deleteLayer')) {
+      if (shouldTriggerDeleteCommand(matches('deleteLayer'), event.key)) {
         event.preventDefault()
-        if (session?.selection) workspace.deleteSelection()
-        else if (session?.selectedLayerIds.length && !session.selectedGroupId) workspace.deleteActiveLayer()
+        event.stopPropagation()
+        const target = resolveDeleteCommand(commandScopeRef.current, Boolean(session?.selection))
+        if (target === 'palette' && session?.selectedPaletteIds.length) workspace.deletePaletteColors(session.selectedPaletteIds)
+        else if (target === 'layers' && (session?.selectedLayerIds.length || session?.selectedGroupIds.length)) workspace.deleteSelectedLayers()
+        else if (target === 'selection' && session?.selection) workspace.deleteSelection()
         return
       }
       if (runCommand('brushSizeDecrease', () => workspace.setBrushSize((session?.brushSize ?? 1) - 1), true)) return
@@ -1071,7 +1086,7 @@ export default function App() {
 
   const editorOnly = advancedMode !== null && Boolean(session) && !homeOpen
   return <main className={`app-shell ${session?.view.showGrid ? 'pixel-grid-on' : ''} ${editorOnly ? 'advanced-mode' : ''} ${advancedMode === 'tool-options' ? 'advanced-tool-options' : ''} ${advancedMode === 'canvas-only' ? 'advanced-canvas-only' : ''}`}>
-    {saveAsOpen && session && <SaveAsDialog initialName={session.document.name.replace(/\.(moonsprite|aseprite|ase|png|jpe?g|webp)$/i, '') || 'MoonSprite-project'} onClose={() => setSaveAsOpen(false)} onSave={(options) => workspace.saveActive(true, options)} />}
+    {saveAsOpen && session && <SaveAsDialog initialName={session.document.name.replace(/\.(moonsprite|aseprite|ase|png|jpe?g|webp)$/i, '') || 'MoonSprite-project'} initialFormat={saveAsFormatForPreference(readStoredString(SAVE_FORMAT_PREFERENCE_KEY))} onClose={() => setSaveAsOpen(false)} onSave={(options) => workspace.saveActive(true, options)} />}
     <AppMenuBar
       openMenu={openMenu}
       setOpenMenu={setOpenMenu}
@@ -1140,14 +1155,14 @@ export default function App() {
 
     <EditorStatusBar homeOpen={homeOpen} resourceLabel={resourceLabel} />
     {advancedModeNotice && <div className="advanced-mode-notice" role="status" aria-live="polite"><strong>{advancedModeNotice}</strong><small>{advancedModeNotice.startsWith('高级模式') ? `${advancedModeNoticeShortcut} 恢复` : advancedModeNoticeShortcut}</small></div>}
-    {workspace.saveProgress && <div className="modal-backdrop save-progress-backdrop" role="presentation"><section className="modal save-progress-modal" role="status" aria-live="polite"><header><div><span className="eyebrow">FILE OPERATION</span><h2>{workspace.saveProgress.title}</h2></div><button type="button" className="icon-button" aria-label={`关闭${workspace.saveProgress.title}进度`} onClick={() => workspace.dismissSaveProgress()}><X size={16} /></button></header><div className="save-progress-body"><strong>{workspace.saveProgress.label}</strong><div className="save-progress-track" aria-label={`${workspace.saveProgress.title}进度 ${workspace.saveProgress.value}%`}><i style={{ width: `${workspace.saveProgress.value}%` }} /></div><small>{workspace.saveProgress.value}%</small></div></section></div>}
-    {workspace.dialog && <div className="modal-backdrop dialog-backdrop" role="presentation"><section className="modal confirm-modal" role="alertdialog" aria-modal="true" aria-labelledby="app-dialog-title"><header><div><span className="eyebrow">MOONSPRITE</span><h2 id="app-dialog-title">{workspace.dialog.title}</h2></div></header><div className="confirm-content"><strong>{workspace.dialog.message}</strong>{workspace.dialog.detail && <p>{workspace.dialog.detail}</p>}</div><footer>{workspace.dialog.choices.map((choice) => <button key={choice.id} className={choice.tone === 'primary' ? 'primary-button' : choice.tone === 'danger' ? 'danger-button' : 'quiet-button'} onClick={() => workspace.resolveDialog(choice.id)}>{choice.label}</button>)}</footer></section></div>}
-    {exportOpen && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) setExportOpen(false) }}><form className="modal export-modal" onSubmit={(event) => { event.preventDefault(); void workspace.exportActive(exportForm).then((exported) => { if (exported) setExportOpen(false) }) }}><header><div><span className="eyebrow">EXPORT IMAGE</span><h2>导出设置</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={() => setExportOpen(false)}><X size={16} /></button></header><div className="modal-body"><label>文件名称<input autoFocus value={exportForm.name} onChange={(event) => setExportForm({ ...exportForm, name: event.target.value })} /></label><label>格式<ThemedSelect<ExportOptions['format']> value={exportForm.format} groups={[{ label: '导出格式', options: [{ value: 'png-auto', label: 'PNG 自动索引' }, { value: 'png-rgba', label: 'PNG RGBA' }, { value: 'jpeg', label: 'JPEG（白色背景）' }, { value: 'webp', label: 'WebP' }, { value: 'svg', label: 'SVG' }] }]} label="导出格式" onChange={(format) => setExportForm({ ...exportForm, format, scalePercent: format === 'svg' ? 100 : exportForm.scalePercent })} /></label><label>{exportForm.format === 'svg' ? '缩放倍数' : '放大比率'}<div className="scale-control"><NumberInput min={1} max={exportForm.format === 'svg' ? 64 : 6400} value={exportForm.format === 'svg' ? exportForm.scalePercent / 100 : exportForm.scalePercent} suffix={exportForm.format === 'svg' ? 'x' : '%'} onValueChange={(value) => setExportForm({ ...exportForm, scalePercent: exportForm.format === 'svg' ? Math.max(100, Math.round(value * 100)) : value })} /><div className="scale-presets" aria-label={exportForm.format === 'svg' ? '缩放倍数预设' : '放大比率预设'}>{exportScalePresets.map((scale) => <button type="button" key={scale} className={exportForm.scalePercent === scale ? 'selected' : ''} onClick={() => setExportForm({ ...exportForm, scalePercent: scale })}>{exportForm.format === 'svg' ? `${scale / 100}x` : `${scale}%`}</button>)}</div></div></label><label>导出预设<ThemedSelect value={presetName} groups={[{ label: '已保存预设', options: [{ value: '', label: '选择预设' }, ...presets.map((preset) => ({ value: preset.presetName, label: `${preset.presetName} · ${preset.scalePercent}%` }))] }]} label="导出预设" onChange={(value) => { const preset = presets.find((item) => item.presetName === value); setPresetName(value); if (preset) setExportForm({ name: preset.name, format: preset.format, scalePercent: preset.scalePercent }) }} /></label><div className="preset-row"><input aria-label="预设名称" placeholder="预设名称" value={presetName} onChange={(event) => setPresetName(event.target.value)} /><button type="button" className="quiet-button" onClick={savePreset}>保存预设</button><button type="button" className="icon-button preset-delete" title="删除当前预设" aria-label="删除当前预设" disabled={!presets.some((preset) => preset.presetName === presetName)} onClick={deletePreset}><Trash2 size={14} /></button></div></div><footer><button type="button" className="quiet-button" onClick={() => setExportOpen(false)}>取消</button><button className="primary-button" type="submit"><FileOutput size={15} />导出</button></footer></form></div>}
+    {workspace.saveProgress && <div className="modal-backdrop save-progress-backdrop" role="presentation"><ModalShell storageKey="save-progress" defaultWidth={228} defaultHeight={142} className="save-progress-modal" role="status" aria-live="polite"><header><div><span className="eyebrow">FILE OPERATION</span><h2>{workspace.saveProgress.title}</h2></div><button type="button" className="icon-button" aria-label={`关闭${workspace.saveProgress.title}进度`} onClick={() => workspace.dismissSaveProgress()}><X size={16} /></button></header><div className="save-progress-body"><strong>{workspace.saveProgress.label}</strong><div className="save-progress-track" aria-label={`${workspace.saveProgress.title}进度 ${workspace.saveProgress.value}%`}><i style={{ width: `${workspace.saveProgress.value}%` }} /></div><small>{workspace.saveProgress.value}%</small></div></ModalShell></div>}
+    {workspace.dialog && <div className="modal-backdrop dialog-backdrop" role="presentation"><ModalShell storageKey="confirm" defaultWidth={420} defaultHeight={260} className="confirm-modal" role="alertdialog" aria-modal="true" aria-labelledby="app-dialog-title"><header><div><span className="eyebrow">MOONSPRITE</span><h2 id="app-dialog-title">{workspace.dialog.title}</h2></div></header><div className="confirm-content"><strong>{workspace.dialog.message}</strong>{workspace.dialog.detail && <p>{workspace.dialog.detail}</p>}</div><footer>{workspace.dialog.choices.map((choice) => <button key={choice.id} className={choice.tone === 'primary' ? 'primary-button' : choice.tone === 'danger' ? 'danger-button' : 'quiet-button'} onClick={() => workspace.resolveDialog(choice.id)}>{choice.label}</button>)}</footer></ModalShell></div>}
+    {exportOpen && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) setExportOpen(false) }}><ModalShell as="form" storageKey="export" defaultWidth={420} defaultHeight={520} className="export-modal" onSubmit={(event) => { event.preventDefault(); void workspace.exportActive(exportForm).then((exported) => { if (exported) setExportOpen(false) }) }}><header><div><span className="eyebrow">EXPORT IMAGE</span><h2>导出设置</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={() => setExportOpen(false)}><X size={16} /></button></header><div className="modal-body"><label>文件名称<input autoFocus value={exportForm.name} onChange={(event) => setExportForm({ ...exportForm, name: event.target.value })} /></label><label>格式<ThemedSelect<ExportOptions['format']> value={exportForm.format} groups={[{ label: '导出格式', options: [{ value: 'png-auto', label: 'PNG 自动索引' }, { value: 'png-rgba', label: 'PNG RGBA' }, { value: 'jpeg', label: 'JPEG（白色背景）' }, { value: 'webp', label: 'WebP' }, { value: 'svg', label: 'SVG' }] }]} label="导出格式" onChange={(format) => setExportForm({ ...exportForm, format, scalePercent: format === 'svg' ? 100 : exportForm.scalePercent })} /></label><label>{exportForm.format === 'svg' ? '缩放倍数' : '放大比率'}<div className="scale-control"><NumberInput min={1} max={exportForm.format === 'svg' ? 64 : 6400} value={exportForm.format === 'svg' ? exportForm.scalePercent / 100 : exportForm.scalePercent} suffix={exportForm.format === 'svg' ? 'x' : '%'} onValueChange={(value) => setExportForm({ ...exportForm, scalePercent: exportForm.format === 'svg' ? Math.max(100, Math.round(value * 100)) : value })} /><div className="scale-presets" aria-label={exportForm.format === 'svg' ? '缩放倍数预设' : '放大比率预设'}>{exportScalePresets.map((scale) => <button type="button" key={scale} className={exportForm.scalePercent === scale ? 'selected' : ''} onClick={() => setExportForm({ ...exportForm, scalePercent: scale })}>{exportForm.format === 'svg' ? `${scale / 100}x` : `${scale}%`}</button>)}</div></div></label><label>导出预设<ThemedSelect value={presetName} groups={[{ label: '已保存预设', options: [{ value: '', label: '选择预设' }, ...presets.map((preset) => ({ value: preset.presetName, label: `${preset.presetName} · ${preset.scalePercent}%` }))] }]} label="导出预设" onChange={(value) => { const preset = presets.find((item) => item.presetName === value); setPresetName(value); if (preset) setExportForm({ name: preset.name, format: preset.format, scalePercent: preset.scalePercent }) }} /></label><div className="preset-row"><input aria-label="预设名称" placeholder="预设名称" value={presetName} onChange={(event) => setPresetName(event.target.value)} /><button type="button" className="quiet-button" onClick={savePreset}>保存预设</button><button type="button" className="icon-button preset-delete" title="删除当前预设" aria-label="删除当前预设" disabled={!presets.some((preset) => preset.presetName === presetName)} onClick={deletePreset}><Trash2 size={14} /></button></div></div><footer><button type="button" className="quiet-button" onClick={() => setExportOpen(false)}>取消</button><button className="primary-button" type="submit"><FileOutput size={15} />导出</button></footer></ModalShell></div>}
     {adjustmentOpen && <AdjustmentDialog kind={adjustmentKind} onClose={() => setAdjustmentOpen(false)} />}
-    {aboutOpen && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) setAboutOpen(false) }}><section className="modal about-modal" role="dialog" aria-modal="true" aria-labelledby="about-title"><header><div><span className="eyebrow">MOONSPRITE</span><h2 id="about-title">关于 MoonSprite</h2></div><button className="icon-button" aria-label="关闭" onClick={() => setAboutOpen(false)}><X size={16} /></button></header><div className="about-content"><Info size={28} /><div><strong>MoonSprite</strong><p className="about-description">为像素创作者打造的独立开源 Windows 绘画工作台，专注清晰、快速的像素级编辑体验。</p><dl><div><dt>版本</dt><dd>{APP_CHANNEL_LABEL}</dd></div><div><dt>作者</dt><dd>MoonPixel Studio 与 MoonSprite Contributors</dd></div><div><dt>许可</dt><dd>MIT License</dd></div></dl><a className="about-link" href="https://github.com/MoonPixelTeam/moonsprite" target="_blank" rel="noreferrer"><GitFork size={15} /><span>github.com/MoonPixelTeam/moonsprite</span><ExternalLink size={13} /></a><p className="about-notice">MoonSprite 是独立实现，与 Aseprite 无隶属关系，未使用其源码、品牌或视觉资产。</p></div></div><footer><button className="primary-button" onClick={() => setAboutOpen(false)}>确定</button></footer></section></div>}
+    {aboutOpen && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) setAboutOpen(false) }}><ModalShell storageKey="about" defaultWidth={460} defaultHeight={450} className="about-modal" role="dialog" aria-modal="true" aria-labelledby="about-title"><header><div><span className="eyebrow">MOONSPRITE</span><h2 id="about-title">关于 MoonSprite</h2></div><button className="icon-button" aria-label="关闭" onClick={() => setAboutOpen(false)}><X size={16} /></button></header><div className="about-content"><Info size={28} /><div><strong>MoonSprite</strong><p className="about-description">为像素创作者打造的独立开源 Windows 绘画工作台，专注清晰、快速的像素级编辑体验。</p><dl><div><dt>版本</dt><dd>{APP_CHANNEL_LABEL}</dd></div><div><dt>作者</dt><dd>MoonPixel Studio 与 MoonSprite Contributors</dd></div><div><dt>许可</dt><dd>MIT License</dd></div></dl><a className="about-link" href="https://github.com/MoonPixelTeam/moonsprite" target="_blank" rel="noreferrer"><GitFork size={15} /><span>github.com/MoonPixelTeam/moonsprite</span><ExternalLink size={13} /></a><p className="about-notice">MoonSprite 是独立实现，与 Aseprite 无隶属关系，未使用其源码、品牌或视觉资产。</p></div></div><footer><button className="primary-button" onClick={() => setAboutOpen(false)}>确定</button></footer></ModalShell></div>}
     {componentLibraryOpen && <Suspense fallback={null}><LazyComponentLibrary onClose={() => setComponentLibraryOpen(false)} /></Suspense>}
-    {workspaceSaveOpen && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget && !workspaceBusy) setWorkspaceSaveOpen(false) }}><form className="modal workspace-save-dialog" onSubmit={(event) => { event.preventDefault(); void saveWorkspace(workspaceSaveName) }}><header><div><span className="eyebrow">WORKSPACE</span><h2>保存当前工作区</h2></div><button type="button" className="icon-button" aria-label="关闭" disabled={workspaceBusy} onClick={() => setWorkspaceSaveOpen(false)}><X size={16} /></button></header><div className="modal-body"><label>工作区名称<input autoFocus maxLength={96} value={workspaceSaveName} placeholder="例如：绘画、调色、动画" onChange={(event) => setWorkspaceSaveName(event.target.value)} /></label><p className="modal-note">将保存窗口大小和位置、工具栏、栏目停靠位置、排序、尺寸及浮动栏目位置。</p><p className="modal-note">文件夹：{workspaceDirectory || 'workspaces'}</p></div><footer><button type="button" className="quiet-button" disabled={workspaceBusy} onClick={() => setWorkspaceSaveOpen(false)}>取消</button><button type="submit" className="primary-button" disabled={workspaceBusy || !workspaceSaveName.trim()}><Save size={15} />保存</button></footer></form></div>}
-    {workspaceManagerOpen && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) setWorkspaceManagerOpen(false) }}><section className="modal workspace-manager-dialog" role="dialog" aria-labelledby="workspace-manager-title"><header><div><span className="eyebrow">WORKSPACE</span><h2 id="workspace-manager-title">管理工作区</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={() => setWorkspaceManagerOpen(false)}><X size={16} /></button></header><div className="workspace-manager-list">{savedWorkspaces.map((saved) => <div key={saved.id} className={`${saved.id === activeWorkspaceId ? 'active ' : ''}${saved.builtIn ? 'built-in' : ''}`}><button type="button" onClick={() => void applyWorkspaceLayout(saved)}><span>{saved.name}</span><small>{saved.id === activeWorkspaceId ? '当前' : '载入'}</small></button>{!saved.builtIn && <button type="button" className="icon-button" title={`删除 ${saved.name}`} aria-label={`删除 ${saved.name}`} onClick={() => void deleteSavedWorkspace(saved)}><Trash2 size={14} /></button>}</div>)}</div><footer className="workspace-manager-footer"><button type="button" className="quiet-button" onClick={() => void window.moonSprite.openWorkspaceFolder()}><FolderOpen size={15} />打开工作区文件夹</button><button type="button" className="primary-button" onClick={() => { setWorkspaceManagerOpen(false); setWorkspaceSaveName(''); setWorkspaceSaveOpen(true) }}><Plus size={15} />新建工作区</button></footer></section></div>}
+    {workspaceSaveOpen && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget && !workspaceBusy) setWorkspaceSaveOpen(false) }}><ModalShell as="form" storageKey="workspace-save" defaultWidth={420} defaultHeight={330} className="workspace-save-dialog" onSubmit={(event) => { event.preventDefault(); void saveWorkspace(workspaceSaveName) }}><header><div><span className="eyebrow">WORKSPACE</span><h2>保存当前工作区</h2></div><button type="button" className="icon-button" aria-label="关闭" disabled={workspaceBusy} onClick={() => setWorkspaceSaveOpen(false)}><X size={16} /></button></header><div className="modal-body"><label>工作区名称<input autoFocus maxLength={96} value={workspaceSaveName} placeholder="例如：绘画、调色、动画" onChange={(event) => setWorkspaceSaveName(event.target.value)} /></label><p className="modal-note">将保存窗口大小和位置、工具栏、栏目停靠位置、排序、尺寸及浮动栏目位置。</p><p className="modal-note">文件夹：{workspaceDirectory || 'workspaces'}</p></div><footer><button type="button" className="quiet-button" disabled={workspaceBusy} onClick={() => setWorkspaceSaveOpen(false)}>取消</button><button type="submit" className="primary-button" disabled={workspaceBusy || !workspaceSaveName.trim()}><Save size={15} />保存</button></footer></ModalShell></div>}
+    {workspaceManagerOpen && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) setWorkspaceManagerOpen(false) }}><ModalShell storageKey="workspace-manager" defaultWidth={520} defaultHeight={500} className="workspace-manager-dialog" role="dialog" aria-labelledby="workspace-manager-title"><header><div><span className="eyebrow">WORKSPACE</span><h2 id="workspace-manager-title">管理工作区</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={() => setWorkspaceManagerOpen(false)}><X size={16} /></button></header><div className="workspace-manager-list">{savedWorkspaces.map((saved) => <div key={saved.id} className={`${saved.id === activeWorkspaceId ? 'active ' : ''}${saved.builtIn ? 'built-in' : ''}`}><button type="button" onClick={() => void applyWorkspaceLayout(saved)}><span>{saved.name}</span><small>{saved.id === activeWorkspaceId ? '当前' : '载入'}</small></button>{!saved.builtIn && <button type="button" className="icon-button" title={`删除 ${saved.name}`} aria-label={`删除 ${saved.name}`} onClick={() => void deleteSavedWorkspace(saved)}><Trash2 size={14} /></button>}</div>)}</div><footer className="workspace-manager-footer"><button type="button" className="quiet-button" onClick={() => void window.moonSprite.openWorkspaceFolder()}><FolderOpen size={15} />打开工作区文件夹</button><button type="button" className="primary-button" onClick={() => { setWorkspaceManagerOpen(false); setWorkspaceSaveName(''); setWorkspaceSaveOpen(true) }}><Plus size={15} />新建工作区</button></footer></ModalShell></div>}
     <NewDocumentDialog open={newOpen} presets={documentSizePresets} onClose={() => setNewOpen(false)} onCreate={(name, width, height, mode) => void createDocumentAndShow(name, width, height, mode)} />
     {session && <CanvasResizeDialog open={canvasResizeOpen} currentWidth={session.document.width} currentHeight={session.document.height} onClose={() => setCanvasResizeOpen(false)} onResize={workspace.resizeActiveCanvas} onPreview={(preview) => { workspace.setCanvasResizePreview(preview); publishCanvasResizePreview(session.document.id, preview) }} preview={session.canvasResizePreview} />}
     {session && <ImageResizeDialog open={imageResizeOpen} currentWidth={session.document.width} currentHeight={session.document.height} onClose={() => setImageResizeOpen(false)} onResize={(width, height, interpolation: ImageResizeInterpolation) => workspace.resizeActiveImage(width, height, interpolation)} />}
diff --git a/src/renderer/src/assets/tool-icons/selection-polygon-lasso.png b/src/renderer/src/assets/tool-icons/selection-polygon-lasso.png
new file mode 100644
index 0000000..9c0cebe
Binary files /dev/null and b/src/renderer/src/assets/tool-icons/selection-polygon-lasso.png differ
diff --git a/src/renderer/src/assets/tool-icons/shape-ellipse-fill.png b/src/renderer/src/assets/tool-icons/shape-ellipse-fill.png
new file mode 100644
index 0000000..4dd14a6
Binary files /dev/null and b/src/renderer/src/assets/tool-icons/shape-ellipse-fill.png differ
diff --git a/src/renderer/src/assets/tool-icons/shape-ellipse.png b/src/renderer/src/assets/tool-icons/shape-ellipse.png
new file mode 100644
index 0000000..e6af125
Binary files /dev/null and b/src/renderer/src/assets/tool-icons/shape-ellipse.png differ
diff --git a/src/renderer/src/assets/tool-icons/shape-rectangle-fill.png b/src/renderer/src/assets/tool-icons/shape-rectangle-fill.png
new file mode 100644
index 0000000..26c3a54
Binary files /dev/null and b/src/renderer/src/assets/tool-icons/shape-rectangle-fill.png differ
diff --git a/src/renderer/src/assets/tool-icons/shape-rectangle.png b/src/renderer/src/assets/tool-icons/shape-rectangle.png
new file mode 100644
index 0000000..78c31c1
Binary files /dev/null and b/src/renderer/src/assets/tool-icons/shape-rectangle.png differ
diff --git a/src/renderer/src/assets/tool-icons/tool-fill.png b/src/renderer/src/assets/tool-icons/tool-fill.png
index 66e583e..4597065 100644
Binary files a/src/renderer/src/assets/tool-icons/tool-fill.png and b/src/renderer/src/assets/tool-icons/tool-fill.png differ
diff --git a/src/renderer/src/components/CanvasResizeDialog.tsx b/src/renderer/src/components/CanvasResizeDialog.tsx
index ed9c706..5454ba4 100644
--- a/src/renderer/src/components/CanvasResizeDialog.tsx
+++ b/src/renderer/src/components/CanvasResizeDialog.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, CircleDot, Info, X } from 'lucide-react'
 import type { CanvasAnchor } from '@shared/types'
 import type { CanvasResizePreview } from '@/store/workspace'
+import { ModalShell } from './ModalShell'
 import { NumberInput } from './NumberInput'
 
 const anchors: Array<{ id: CanvasAnchor; label: string; icon: typeof ArrowUp }> = [
@@ -94,7 +95,7 @@ export function CanvasResizeDialog({ open, currentWidth, currentHeight, onClose,
   const right = value.width - currentWidth - left; const bottom = value.height - currentHeight - top
 
   return <div className="modal-backdrop" role="presentation">
-    <form className="modal canvas-resize-modal" onSubmit={submit} aria-label="调整画布尺寸">
+    <ModalShell as="form" storageKey="canvas-resize-v3" placement="right" defaultWidth={430} defaultHeight={500} minWidth={390} minHeight={430} maxWidth={580} maxHeight={720} className="canvas-resize-modal" onSubmit={submit} aria-label="调整画布尺寸">
       <header><div><span className="eyebrow">CANVAS SIZE</span><h2>画布大小</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={onClose}><X size={16} /></button></header>
       <div className="modal-body canvas-resize-body">
         <section><h3>大小</h3><div className="canvas-size-grid"><div className="resize-fields"><label className="component-number-input-row canvas-resize-number-row"><span>宽</span><NumberInput aria-label="画布宽度" min={1} suffix="px" value={value.width} onValueChange={(next) => setDimension('width', next)} /></label><label className="component-number-input-row canvas-resize-number-row"><span>高</span><NumberInput aria-label="画布高度" min={1} suffix="px" value={value.height} onValueChange={(next) => setDimension('height', next)} /></label></div><div className="anchor-grid" aria-label="画布锚点">{anchors.map((item) => { const Icon = item.icon; return <button type="button" key={item.id} aria-label={item.label} title={item.label} className={`icon-button ${anchor === item.id ? 'selected' : ''}`} onClick={() => { setAnchor(item.id); applyAnchor(value.width, value.height, item.id) }}><Icon size={16} /></button> })}</div></div></section>
@@ -102,6 +103,6 @@ export function CanvasResizeDialog({ open, currentWidth, currentHeight, onClose,
         <label className="tool-checkbox trim-canvas-checkbox"><input type="checkbox" checked={trimOutside} onChange={(event) => setTrimOutside(event.target.checked)} /><span>裁掉画布外的内容</span><span className="setting-help" title="缩小画布时，移出新边界的像素将被裁掉。"><Info size={14} aria-label="说明" /></span></label>
       </div>
       <footer><button type="button" className="quiet-button" onClick={onClose}>取消</button><button className="primary-button" type="submit">完成</button></footer>
-    </form>
+    </ModalShell>
   </div>
 }
diff --git a/src/renderer/src/components/CanvasStage.tsx b/src/renderer/src/components/CanvasStage.tsx
index af5908a..d8a6cdd 100644
--- a/src/renderer/src/components/CanvasStage.tsx
+++ b/src/renderer/src/components/CanvasStage.tsx
@@ -7,12 +7,13 @@ import { appendPerfectPixelSegment, applySelectionTransform, applySelectionTrans
 import { useWorkspace, type DocumentSession } from '@/store/workspace'
 import { loadEditorPreferences, type BrushPreviewMode, type CheckerboardPreferences, type RotationIndicatorPosition, type ZoomToolDragMode } from '@/core/file-preferences'
 import { documentPointFromViewportPoint, documentPointFromViewportPointContinuous, rotationIndicatorFitsCanvas, unrotateViewportPoint, viewPanDeltaFromScreen, viewRotationPivot, zoomViewAroundViewportPoint } from '@/core/view-geometry'
-import { createCanvasRenderPlan } from '@/core/canvas-render-plan'
-import { cloneSelection, combineSelection, ellipseSelection, lassoSelection, magicWandSelection, rectSelection, selectionContains, transformSelectionMask } from '@/core/selection'
+import { createCanvasRenderPlan, deviceAlignedPixelRect } from '@/core/canvas-render-plan'
+import { balancedStairLinePoints } from '@/core/pixel-line'
+import { cloneSelection, combineSelection, ellipseSelection, lassoSelection, magicWandSelection, rasterLinePoints, rectSelection, selectionContains, shiftSelection, transformSelectionMask } from '@/core/selection'
 import { CANVAS_RESIZE_PREVIEW_EVENT, drawCanvasResizePreviewLayers } from '@/core/canvas-resize-preview'
 import { loadShortcuts, modifierShortcutHeld } from '@/core/shortcuts'
-import { CanvasInputState, clampCanvasZoom as clampZoom, constrainedTranslation, resizeSelectionBounds, selectionInteractionHit, selectionTransformModifiers, shapeBounds, shouldStartCanvasPan, snapSelectionRotation, steppedCanvasZoom as steppedZoom, zoomDragModeForModifiers, zoomDragTarget, type CanvasDragState as DragState, type CanvasPoint as Point, type SelectionHandle, type SelectionHit, type SelectionRotationHandle } from '@/core/canvas-input'
-import { canvasCursors, canvasStatusTextColor, canvasToolCursor, colorLuminance, previewCursorTools, resizeCursors, rotationCursors, selectionPreviewPixels, selectionTransformDragCursor, transparencyColorAt } from '@/core/canvas-visuals'
+import { CanvasInputState, appendPolygonLassoVertex, canvasGestureForPreview, clampCanvasZoom as clampZoom, constrainedTranslation, createCanvasPanDrag, finalizeMarqueeSelection, polygonLassoClosedPathPoints, polygonLassoPreviewPoints, resizeSelectionBounds, restoreCanvasDragAfterPan, selectionGestureMoved, selectionInteractionHit, selectionOverlayMaskForDrag, selectionTransformModifiers, shapeBounds, shouldClosePolygonLasso, shouldRestartFloatingSelectionForCopy, shouldStartCanvasPan, snapSelectionRotation, steppedCanvasZoom as steppedZoom, zoomDragModeForModifiers, zoomDragTarget, type CanvasDragState as DragState, type CanvasPoint as Point, type SelectionHandle, type SelectionHit, type SelectionRotationHandle } from '@/core/canvas-input'
+import { canvasCursors, canvasStatusTextColor, canvasToolCursor, colorLuminance, previewCursorTools, resizeCursors, rotationCursors, selectionCreationCursor, selectionCursorCornerRects, selectionPathPreviewPixelVisible, selectionPreviewPixels, selectionTransformDragCursor, transparencyColorAt } from '@/core/canvas-visuals'
 import { CanvasCompositeCache } from '@/components/canvas-composite-cache'
 import { drawSelectionOutline, selectionScreenBox, type RasterContext2D, type SelectionBoundaryCache } from '@/components/canvas-selection-renderer'
 import { useCanvasViewPreview } from '@/components/useCanvasViewPreview'
@@ -43,6 +44,10 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
   const [checkerboard, setCheckerboard] = useState<CheckerboardPreferences>(() => loadEditorPreferences().checkerboard)
   const [wheelZoomEnabled, setWheelZoomEnabled] = useState(() => loadEditorPreferences().wheelZoomEnabled)
   const [shiftLinePreviewEnabled, setShiftLinePreviewEnabled] = useState(() => loadEditorPreferences().shiftLinePreviewEnabled)
+  const [lassoPreviewClosed, setLassoPreviewClosed] = useState(() => loadEditorPreferences().lassoPreviewClosed)
+  const [eyedropperSwitchToPencil, setEyedropperSwitchToPencil] = useState(() => loadEditorPreferences().eyedropperSwitchToPencil)
+  const [selectionCrosshair, setSelectionCrosshair] = useState(() => loadEditorPreferences().selectionCrosshair)
+  const [balancedShiftLineEnabled, setBalancedShiftLineEnabled] = useState(() => loadEditorPreferences().balancedShiftLineEnabled)
   const [shortcuts, setShortcuts] = useState(loadShortcuts)
   const inputRef = useRef(new CanvasInputState())
   const rafRef = useRef<number | null>(null)
@@ -65,7 +70,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
   const activeViewDrag = inputRef.current.drag?.kind === 'pan' || inputRef.current.drag?.kind === 'zoom-drag' || inputRef.current.drag?.kind === 'rotate-view'
   const { pendingViewRef, liveViewRef, zoomPreviewStartRef, applyRotationStyle, finishZoomPreview, scheduleZoomPreview, beginPanPreview, schedulePanPreview, finishPanPreview, cancelViewPreviews } = useCanvasViewPreview({ documentId: session.document.id, sessionView: session.view, activeViewDrag, canvasRef, selectionCanvasRef, drawRef })
   const lineAnchor = session.tool === 'eraser' ? session.lastEraserPoint : session.lastPencilPoint
-  const hasSelectedRasterLayer = !session.selectedGroupId && session.selectedLayerIds.some((id) => session.document.layers.some((layer) => layer.id === id))
+  const hasSelectedRasterLayer = session.selectedGroupIds.length === 0 && session.selectedLayerIds.some((id) => session.document.layers.some((layer) => layer.id === id))
   const activeLayer = getActiveLayer(session.document)
   const activeLayerEditable = hasSelectedRasterLayer && isLayerEffectivelyVisible(session.document, activeLayer) && !isLayerEffectivelyLocked(session.document, activeLayer)
   const brushToolEnabled = session.tool === 'pencil' || session.tool === 'eraser' || session.tool === 'fill'
@@ -132,6 +137,10 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       setCheckerboard(preferences.checkerboard)
       setWheelZoomEnabled(preferences.wheelZoomEnabled)
       setShiftLinePreviewEnabled(preferences.shiftLinePreviewEnabled)
+      setLassoPreviewClosed(preferences.lassoPreviewClosed)
+      setEyedropperSwitchToPencil(preferences.eyedropperSwitchToPencil)
+      setSelectionCrosshair(preferences.selectionCrosshair)
+      setBalancedShiftLineEnabled(preferences.balancedShiftLineEnabled)
     }
     window.addEventListener('moonsprite:preferences-changed', syncPreferences)
     return () => window.removeEventListener('moonsprite:preferences-changed', syncPreferences)
@@ -242,12 +251,9 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     const overlay = selectionCanvasRef.current
     if (!canvas || !overlay) return
     const currentSession = useWorkspace.getState().sessions.find((item) => item.document.id === session.document.id) ?? session
-    const selectionDrag = inputRef.current.drag
-    const creatingSelection = selectionDrag?.kind === 'marquee' || selectionDrag?.kind === 'lasso'
-    const previewingSelection = selectionDrag?.kind === 'magic-preview' || selectionDrag?.kind === 'move-selection' || selectionDrag?.kind === 'move-content' || selectionDrag?.kind === 'transform-content' || selectionDrag?.kind === 'rotate-content'
-    const visibleSelection = previewingSelection ? selectionDrag.previewSelection ?? currentSession.selection : currentSession.selection
-    const creationSelection = creatingSelection ? selectionDrag.selectionStart : null
-    if (!visibleSelection && !creationSelection && !selectionOverlayVisibleRef.current) return
+    const selectionDrag = canvasGestureForPreview(inputRef.current.drag)
+    const creatingSelection = selectionDrag?.kind === 'marquee' || selectionDrag?.kind === 'lasso' || selectionDrag?.kind === 'polygon-lasso'
+    const visibleSelection = selectionOverlayMaskForDrag(currentSession.selection, selectionDrag)
     const rect = stageSize()
     const dpr = window.devicePixelRatio || 1
     const backingWidth = Math.max(1, Math.round(rect.width * dpr))
@@ -257,6 +263,9 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     if (!displayContext) return
     displayContext.setTransform(dpr, 0, 0, dpr, 0, 0)
     displayContext.clearRect(0, 0, rect.width, rect.height)
+    const shouldDrawSelection = Boolean(visibleSelection)
+    selectionOverlayVisibleRef.current = shouldDrawSelection
+    if (!shouldDrawSelection || !visibleSelection) return
     const renderPlan = createCanvasRenderPlan(rect.width, rect.height, session.document, liveViewRef.current, rotationIndicatorPosition)
     const { rotated, sceneLeft, sceneTop, sceneWidth, sceneHeight } = renderPlan
     let context: RasterContext2D = displayContext
@@ -274,7 +283,6 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       sceneContext.clearRect(sceneLeft, sceneTop, sceneWidth, sceneHeight)
       context = sceneContext
     }
-    selectionOverlayVisibleRef.current = Boolean(visibleSelection || creationSelection)
     const drawOverlaySelection = (selection: SelectionMask, showHandles: boolean): void => {
       selectionBoundaryCacheRef.current = drawSelectionOutline({
         context,
@@ -285,17 +293,17 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         viewportHeight: rect.height,
         rotationIndicatorPosition,
         cache: selectionBoundaryCacheRef.current,
+        showOutline: currentSession.view.showSelectionOutline !== false,
         showHandles
       })
     }
-    if (visibleSelection && !creatingSelection) drawOverlaySelection(visibleSelection, currentSession.tool === 'selection')
-    if (creationSelection) drawOverlaySelection(creationSelection, false)
+    drawOverlaySelection(visibleSelection, currentSession.tool === 'selection' && !creatingSelection)
     if (rotated) {
       displayContext.save()
       applyViewRotation(displayContext, rect.width, rect.height, liveViewRef.current)
       displayContext.imageSmoothingEnabled = false
       const scene = selectionRotationSceneRef.current!
-      displayContext.drawImage(scene, 0, 0, scene.width, scene.height, sceneLeft, sceneTop, sceneWidth, sceneHeight)
+      displayContext.drawImage(scene, 0, 0, scene.width, scene.height, sceneLeft, sceneTop, scene.width / dpr, scene.height / dpr)
       displayContext.restore()
     }
   }
@@ -307,7 +315,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     if (!canvas) return
     const currentSession = useWorkspace.getState().sessions.find((item) => item.document.id === session.document.id) ?? session
     const currentActiveLayer = getActiveLayer(currentSession.document)
-    const currentHasRasterSelection = !currentSession.selectedGroupId && currentSession.selectedLayerIds.some((id) => currentSession.document.layers.some((layer) => layer.id === id))
+    const currentHasRasterSelection = currentSession.selectedGroupIds.length === 0 && currentSession.selectedLayerIds.some((id) => currentSession.document.layers.some((layer) => layer.id === id))
     const canRenderToolPreview = !canvasResizePreviewRef.current && currentHasRasterSelection && isLayerEffectivelyVisible(currentSession.document, currentActiveLayer) && !isLayerEffectivelyLocked(currentSession.document, currentActiveLayer)
     const rect = stageSize()
     const dpr = window.devicePixelRatio || 1
@@ -386,13 +394,8 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
           : paintColor
       return compositePixelWithLayerColor(document, index, activeLayer.id, replacement)
     }
-    const previewPixelRect = (pixelX: number, pixelY: number): { x: number; y: number; width: number; height: number } => {
-      const left = Math.round(originX + pixelX * view.zoom)
-      const top = Math.round(originY + pixelY * view.zoom)
-      const right = Math.round(originX + (pixelX + 1) * view.zoom)
-      const bottom = Math.round(originY + (pixelY + 1) * view.zoom)
-      return { x: left, y: top, width: Math.max(1, right - left), height: Math.max(1, bottom - top) }
-    }
+    const previewPixelRect = (pixelX: number, pixelY: number): { x: number; y: number; width: number; height: number } =>
+      deviceAlignedPixelRect(originX, originY, view.zoom, pixelX, pixelY, dpr)
     const drawPreviewPixel = (pixelX: number, pixelY: number, color: RgbaColor): { x: number; y: number; width: number; height: number } => {
       const pixelRect = previewPixelRect(pixelX, pixelY)
       const transparency = transparencyColorAt(pixelX, pixelY, checkerboard)
@@ -412,15 +415,23 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       context.clip()
       for (const value of previewPixels) {
         const [x, y] = value.split(':').map(Number)
-        if (x < 0 || y < 0 || x >= document.width || y >= document.height) continue
+        const pixelRect = previewPixelRect(x, y)
+        const insideDocument = x >= 0 && y >= 0 && x < document.width && y < document.height
+        if (!selectionPathPreviewPixelVisible(pixelRect, rect.width, rect.height, insideDocument)) continue
         const sampled = sampleCompositeColor(document, x, y)
         const background = sampled.a > 0 ? sampled : transparencyColorAt(x, y, checkerboard)
         context.fillStyle = colorLuminance(background) > 145 ? '#111318' : '#f7f7f7'
-        const pixelRect = previewPixelRect(x, y)
         context.fillRect(pixelRect.x, pixelRect.y, pixelRect.width, pixelRect.height)
       }
       context.restore()
     }
+    const drawSelectionCursorCorners = (pixelX: number, pixelY: number, color: string): void => {
+      const pixelRect = previewPixelRect(pixelX, pixelY)
+      context.save()
+      context.fillStyle = color
+      for (const mark of selectionCursorCornerRects(pixelRect, dpr)) context.fillRect(mark.x, mark.y, mark.width, mark.height)
+      context.restore()
+    }
     const drawSelectionFillPreview = (selection: SelectionMask): void => {
       const left = Math.max(selection.x, fromX)
       const top = Math.max(selection.y, fromY)
@@ -447,11 +458,10 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       const { x: beforeX, y: beforeY } = brushStampAnchor(session.brushSize, session.tool === 'pencil' || session.tool === 'eraser' ? activeBrushImage : null)
       const patternOrigin = brushPatternOrigin(from)
       const drawn = new Set<number>()
-      let x = from.x; let y = from.y
-      const deltaX = Math.abs(to.x - from.x); const stepX = from.x < to.x ? 1 : -1
-      const deltaY = -Math.abs(to.y - from.y); const stepY = from.y < to.y ? 1 : -1
-      let error = deltaX + deltaY
-      while (true) {
+      const centers = balancedShiftLineEnabled ? balancedStairLinePoints(from, to) : rasterLinePoints(from, to)
+      for (const center of centers) {
+        const x = center.x
+        const y = center.y
         const texture = session.tool === 'pencil' || session.tool === 'eraser' ? activeBrushTexture : 'solid'
         const mask = brushMaskOffsets(session.brushSize, session.brushShape, texture, session.brushTextureScale, x - beforeX, y - beforeY, session.tool === 'pencil' || session.tool === 'eraser' ? activeBrushImage : null, session.brushImageSettings, proceduralAntialiasStrength, activeBrushPreviewMode, patternOrigin.x, patternOrigin.y)
         for (const offset of mask) {
@@ -461,10 +471,6 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
           drawn.add(index)
           drawPreviewPixel(pixelX, pixelY, previewColorAt(pixelX, pixelY, erase, offset.coverage, offset.color ?? session.primaryColor))
         }
-        if (x === to.x && y === to.y) break
-        const twice = error * 2
-        if (twice >= deltaY) { error += deltaY; x += stepX }
-        if (twice <= deltaX) { error += deltaX; y += stepY }
       }
     }
 
@@ -488,7 +494,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
 
     const drag = inputRef.current.drag
     if (canRenderToolPreview && drag?.kind === 'shape') {
-      const shape = shapeBounds(drag.start, drag.last, drag.constrain)
+      const shape = shapeBounds(drag.start, drag.last, drag.constrain, session.shapeRatio)
       for (const point of shapePixelPoints(shape, session.shapeKind)) {
         if (point.x < 0 || point.y < 0 || point.x >= document.width || point.y >= document.height) continue
         const color = previewColorAt(point.x, point.y)
@@ -524,10 +530,6 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
           context.beginPath()
           context.rect(x, y, previewWidth, previewHeight)
           context.clip()
-          context.beginPath()
-          context.rect(0, 0, rect.width, rect.height)
-          context.rect(originX, originY, canvasWidth, canvasHeight)
-          context.clip('evenodd')
           context.fillStyle = `rgb(${checkerboard.lightColor.r} ${checkerboard.lightColor.g} ${checkerboard.lightColor.b})`
           context.fillRect(x, y, previewWidth, previewHeight)
           const previewCheckerCell = checkerboard.size * view.zoom
@@ -591,8 +593,8 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         context.restore()
       })
     }
-    const selectionDrag = inputRef.current.drag
-    if (selectionDrag?.kind === 'marquee') {
+    const selectionDrag = canvasGestureForPreview(inputRef.current.drag)
+    if (selectionDrag?.kind === 'marquee' && selectionDrag.moved) {
       const drag = selectionDrag
       const bounds = shapeBounds(drag.start, drag.last, drag.constrain)
       const previewSelection = session.selectionKind === 'ellipse'
@@ -600,51 +602,50 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         : rectSelection(bounds.x, bounds.y, bounds.width, bounds.height)
       drawSelectionPathPreview(selectionPreviewPixels(previewSelection))
     }
-    if (inputRef.current.drag?.kind === 'lasso' && (inputRef.current.drag.path?.length ?? 0) > 1) {
+    if ((selectionDrag?.kind === 'lasso' || selectionDrag?.kind === 'polygon-lasso') && (selectionDrag.path?.length ?? 0) > 0) {
       const previewPixels = new Set<string>()
-      const addAxisLine = (from: Point, to: Point): void => {
-        const stepX = Math.sign(to.x - from.x)
-        const stepY = Math.sign(to.y - from.y)
-        let x = from.x
-        let y = from.y
-        previewPixels.add(`${x}:${y}`)
-        while (x !== to.x || y !== to.y) {
-          x += stepX
-          y += stepY
-          previewPixels.add(`${x}:${y}`)
-        }
+      const addLine = (from: Point, to: Point): void => {
+        for (const point of rasterLinePoints(from, to)) previewPixels.add(`${point.x}:${point.y}`)
       }
-      const path = inputRef.current.drag.path ?? []
-      for (let index = 1; index < path.length; index += 1) {
-        const previous = path[index - 1]
-        const point = path[index]
-        if (Math.abs(point.x - previous.x) >= Math.abs(point.y - previous.y)) {
-          addAxisLine(previous, { x: point.x, y: previous.y })
-          addAxisLine({ x: point.x, y: previous.y }, point)
-        } else {
-          addAxisLine(previous, { x: previous.x, y: point.y })
-          addAxisLine({ x: previous.x, y: point.y }, point)
-        }
+      const path = selectionDrag.path ?? []
+      if (selectionDrag.kind === 'polygon-lasso') {
+        for (const point of polygonLassoPreviewPoints(path, selectionDrag.last, lassoPreviewClosed, balancedShiftLineEnabled)) previewPixels.add(`${point.x}:${point.y}`)
+      } else {
+        for (let index = 1; index < path.length; index += 1) addLine(path[index - 1], path[index])
+        if (lassoPreviewClosed && path.length > 1) addLine(path.at(-1)!, path[0])
       }
       drawSelectionPathPreview(previewPixels)
+      const mode = selectionDrag.selectionMode ?? session.selectionMode
+      const point = inputRef.current.pointer.point
+      if (mode !== 'replace' && point.x >= 0 && point.y >= 0 && point.x < document.width && point.y < document.height) {
+        const pixelRect = previewPixelRect(point.x, point.y)
+        const sampled = sampleCompositeColor(document, point.x, point.y)
+        const background = sampled.a > 0 ? sampled : transparencyColorAt(point.x, point.y, checkerboard)
+        context.save()
+        context.strokeStyle = colorLuminance(background) > 145 ? '#111318' : '#f7f7f7'
+        context.lineWidth = 1
+        context.strokeRect(pixelRect.x + 0.5, pixelRect.y + 0.5, Math.max(0, pixelRect.width - 1), Math.max(0, pixelRect.height - 1))
+        context.restore()
+      }
     }
     if (inputRef.current.drag?.kind === 'magic-preview' && inputRef.current.drag.previewSelection) {
       drawSelectionFillPreview(inputRef.current.drag.previewSelection)
       drawSelectionPathPreview(selectionPreviewPixels(inputRef.current.drag.previewSelection))
     }
 
-    if (canRenderToolPreview && !inputRef.current.drag && !inputRef.current.spaceHeld && !inputRef.current.sampling && inputRef.current.pointer.visible && session.tool === 'selection') {
+    const activeSelectionCreation = selectionDrag?.kind === 'marquee' || selectionDrag?.kind === 'lasso' || selectionDrag?.kind === 'polygon-lasso'
+    if (canRenderToolPreview && (!inputRef.current.drag || activeSelectionCreation) && !inputRef.current.spaceHeld && !inputRef.current.sampling && inputRef.current.pointer.visible && session.tool === 'selection') {
       const point = inputRef.current.pointer.point
       const selectionHit = session.selection ? selectionHitAt(inputRef.current.pointer.clientX, inputRef.current.pointer.clientY) : 'outside'
-      if (point.x >= 0 && point.y >= 0 && point.x < document.width && point.y < document.height && selectionHit === 'outside' && (!session.selection || !selectionContains(session.selection, point.x, point.y))) {
-        const sampled = sampleCompositeColor(document, point.x, point.y)
+      const combinationMode = session.selectionMode !== 'replace'
+      const transformInteraction = selectionHit !== 'inside' && selectionHit !== 'outside'
+      const addModeInteraction = !inputRef.current.shiftHeld && session.selectionMode === 'add' && selectionHit !== 'outside'
+      const creatingSelection = activeSelectionCreation || inputRef.current.shiftHeld || combinationMode || (selectionHit === 'outside' && (!session.selection || !selectionContains(session.selection, point.x, point.y)))
+      if (!transformInteraction && !addModeInteraction && creatingSelection) {
+        const insideDocument = point.x >= 0 && point.y >= 0 && point.x < document.width && point.y < document.height
+        const sampled = insideDocument ? sampleCompositeColor(document, point.x, point.y) : { r: 74, g: 74, b: 81, a: 255 }
         const background = sampled.a > 0 ? sampled : transparencyColorAt(point.x, point.y, checkerboard)
-        const pixelRect = previewPixelRect(point.x, point.y)
-        context.save()
-        context.strokeStyle = colorLuminance(background) > 145 ? '#111318' : '#f7f7f7'
-        context.lineWidth = 1
-        context.strokeRect(pixelRect.x + 0.5, pixelRect.y + 0.5, Math.max(0, pixelRect.width - 1), Math.max(0, pixelRect.height - 1))
-        context.restore()
+        drawSelectionCursorCorners(point.x, point.y, colorLuminance(background) > 145 ? '#111318' : '#f7f7f7')
       }
     }
 
@@ -710,7 +711,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       applyViewRotation(displayContext, rect.width, rect.height, view)
       displayContext.imageSmoothingEnabled = false
       const scene = rotationSceneRef.current!
-      displayContext.drawImage(scene, 0, 0, scene.width, scene.height, sceneLeft, sceneTop, sceneWidth, sceneHeight)
+      displayContext.drawImage(scene, 0, 0, scene.width, scene.height, sceneLeft, sceneTop, scene.width / dpr, scene.height / dpr)
       displayContext.restore()
     }
     const statusBackgroundAt = (viewportX: number, viewportY: number): RgbaColor => {
@@ -748,7 +749,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     if (pointer.visible) {
       const point = localPointAt(pointer.clientX, pointer.clientY)
       if (point) inputRef.current.updatePointer({ point, clientX: pointer.clientX, clientY: pointer.clientY, ctrlKey: inputRef.current.ctrlHeld, altKey: inputRef.current.altHeld })
-      updateCursorAt(pointer.clientX, pointer.clientY, inputRef.current.ctrlHeld, inputRef.current.altHeld)
+      updateCursorAt(pointer.clientX, pointer.clientY, inputRef.current.ctrlHeld, inputRef.current.altHeld, inputRef.current.shiftHeld)
     }
     drawRef.current()
   // View rotation is rendered inside the canvas rather than by rotating the viewport element.
@@ -766,6 +767,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       if (event.key === 'Control') {
         inputRef.current.ctrlHeld = true
       }
+      if (event.key === 'Shift') inputRef.current.shiftHeld = true
       if (session.tool === 'rotate' && modifierActive(event, 'resetViewRotation')) {
         const drag = inputRef.current.drag
         if (drag?.kind === 'rotate-view') {
@@ -796,10 +798,13 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         scheduleDraw()
       } else if (event.key === 'Alt' && inputRef.current.pointer.visible) {
         event.preventDefault()
-        updateCursorAt(inputRef.current.pointer.clientX, inputRef.current.pointer.clientY, inputRef.current.ctrlHeld, true)
+        updateCursorAt(inputRef.current.pointer.clientX, inputRef.current.pointer.clientY, inputRef.current.ctrlHeld, true, inputRef.current.shiftHeld)
         scheduleDraw()
       } else if (event.key === 'Control' && inputRef.current.pointer.visible) {
-        updateCursorAt(inputRef.current.pointer.clientX, inputRef.current.pointer.clientY, true, inputRef.current.altHeld)
+        updateCursorAt(inputRef.current.pointer.clientX, inputRef.current.pointer.clientY, true, inputRef.current.altHeld, inputRef.current.shiftHeld)
+        scheduleDraw()
+      } else if (event.key === 'Shift' && inputRef.current.pointer.visible) {
+        updateCursorAt(inputRef.current.pointer.clientX, inputRef.current.pointer.clientY, inputRef.current.ctrlHeld, inputRef.current.altHeld, true)
         scheduleDraw()
       }
     }
@@ -812,12 +817,13 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         return
       }
       if (lineConnectionConfigured && !lineConnectionActive(event)) updateShiftPreview(false)
-      if (event.key === 'Alt' || event.key === 'Control') {
+      if (event.key === 'Alt' || event.key === 'Control' || event.key === 'Shift') {
         if (event.key === 'Alt') { event.preventDefault(); inputRef.current.altHeld = false }
         if (event.key === 'Control') inputRef.current.ctrlHeld = false
+        if (event.key === 'Shift') inputRef.current.shiftHeld = false
         inputRef.current.sampling = session.tool === 'eyedropper'
         inputRef.current.modifierBrushSize = null
-        if (inputRef.current.pointer.visible) updateCursorAt(inputRef.current.pointer.clientX, inputRef.current.pointer.clientY, inputRef.current.ctrlHeld, inputRef.current.altHeld)
+        if (inputRef.current.pointer.visible) updateCursorAt(inputRef.current.pointer.clientX, inputRef.current.pointer.clientY, inputRef.current.ctrlHeld, inputRef.current.altHeld, inputRef.current.shiftHeld)
         else if (canvasRef.current) canvasRef.current.style.cursor = inputRef.current.sampling ? canvasCursors.eyedropper : canvasToolCursor(session.tool, session.primaryColor)
         scheduleDraw()
       }
@@ -828,6 +834,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       inputRef.current.sampling = false
       inputRef.current.altHeld = false
       inputRef.current.ctrlHeld = false
+      inputRef.current.shiftHeld = false
       inputRef.current.modifierBrushSize = null
       if (canvasRef.current) canvasRef.current.style.cursor = canvasToolCursor(session.tool, session.primaryColor)
     }
@@ -849,12 +856,16 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     if (session.selection) rafRef.current = window.setTimeout(renderSelection, 160)
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0]
-      if (entry) stageSizeRef.current = { width: entry.contentRect.width, height: entry.contentRect.height }
+      if (entry) {
+        stageSizeRef.current = { width: entry.contentRect.width, height: entry.contentRect.height }
+        useWorkspace.getState().setViewportSize(stageSizeRef.current)
+      }
       draw()
     })
     if (stageRef.current) {
       const bounds = stageRef.current.getBoundingClientRect()
       stageSizeRef.current = { width: bounds.width, height: bounds.height }
+      useWorkspace.getState().setViewportSize(stageSizeRef.current)
       observer.observe(stageRef.current)
     }
     return () => {
@@ -867,7 +878,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       cancelViewPreviews()
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session, session.revision, session.view.showGrid, session.view.relativeLuminance, session.view.mirrored, session.view.mirroredVertical, session.selection, session.outlinePreview, session.brushSize, session.brushShape, session.shapeKind, session.fillMode, drawingBrushPreviewEnabled, brushPreviewMode, checkerboard, shiftLinePreviewEnabled, lineConnectionShortcut, rotationIndicatorPosition])
+  }, [session, session.revision, session.view.showGrid, session.view.relativeLuminance, session.view.mirrored, session.view.mirroredVertical, session.view.showSelectionOutline, session.selection, session.outlinePreview, session.brushSize, session.brushShape, session.shapeKind, session.shapeRatio, session.fillMode, drawingBrushPreviewEnabled, brushPreviewMode, checkerboard, shiftLinePreviewEnabled, lassoPreviewClosed, selectionCrosshair, balancedShiftLineEnabled, lineConnectionShortcut, rotationIndicatorPosition])
 
   const unrotatedStagePoint = (clientX: number, clientY: number): Point => {
     const bounds = stageBounds()
@@ -884,11 +895,6 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
 
   const localPoint = (event: React.PointerEvent<HTMLCanvasElement>): Point | null => localPointAt(event.clientX, event.clientY)
 
-  const clampSelectionPoint = (point: Point): Point => ({
-    x: Math.max(0, Math.min(session.document.width - 1, point.x)),
-    y: Math.max(0, Math.min(session.document.height - 1, point.y))
-  })
-
   const topEditableLayerAt = (point: Point) => {
     for (let index = session.document.layers.length - 1; index >= 0; index -= 1) {
       const layer = session.document.layers[index]
@@ -951,7 +957,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
 
   const canvasResizeContains = (event: React.PointerEvent<HTMLCanvasElement>): boolean => canvasResizeContainsAt(event.clientX, event.clientY)
 
-  const updateCursorAt = (clientX: number, clientY: number, ctrlKey: boolean, altKey: boolean): void => {
+  const updateCursorAt = (clientX: number, clientY: number, ctrlKey: boolean, altKey: boolean, shiftKey = false): void => {
     const canvas = canvasRef.current
     if (!canvas) return
     if (inputRef.current.spaceHeld) {
@@ -1001,17 +1007,18 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       canvas.style.cursor = transformCursor
       return
     }
-    if (inputRef.current.drag?.kind === 'marquee' || inputRef.current.drag?.kind === 'lasso' || inputRef.current.drag?.kind === 'magic-preview') {
+    if (inputRef.current.drag?.kind === 'marquee' || inputRef.current.drag?.kind === 'lasso' || inputRef.current.drag?.kind === 'polygon-lasso' || inputRef.current.drag?.kind === 'magic-preview') {
       inputRef.current.sampling = false
-      canvas.style.cursor = canvasToolCursor('selection', contrastColor)
+      canvas.style.cursor = selectionCreationCursor(selectionCrosshair, activeLayerEditable)
       return
     }
     const altActive = inputRef.current.altHeld || altKey
     const ctrlActive = inputRef.current.ctrlHeld || ctrlKey
     const modifierSizing = ctrlKey && altActive && (session.tool === 'pencil' || session.tool === 'eraser')
-    const selectionHit = session.tool === 'selection' ? selectionHitAt(clientX, clientY) : 'outside'
-    const moveCopyAvailable = session.tool === 'move' && insideDocument && Boolean(session.moveAutoSelect ? (point && topEditableLayerAt(point)) : activeLayerEditable)
-    const selectionCopyAvailable = session.tool === 'selection' && !altActive && ctrlActive && selectionHit === 'inside' && activeLayerEditable && !session.pendingPaste
+    const rawSelectionHit = session.tool === 'selection' ? selectionHitAt(clientX, clientY) : 'outside'
+    const selectionHit = shiftKey ? 'outside' : session.selectionMode === 'replace' || session.selectionMode === 'add' || rawSelectionHit !== 'inside' ? rawSelectionHit : 'outside'
+    const moveCopyAvailable = session.tool === 'move' && insideDocument && Boolean(session.moveAutoSelect ? (point && (topEditableLayerAt(point) ?? (activeLayerEditable ? getActiveLayer(session.document) : null))) : activeLayerEditable)
+    const selectionCopyAvailable = session.tool === 'selection' && !altActive && ctrlActive && selectionHit === 'inside' && activeLayerEditable && (!session.pendingPaste || shouldRestartFloatingSelectionForCopy(session.pendingPaste.copy, true))
     const copyAvailable = (altActive && moveCopyAvailable) || selectionCopyAvailable
     const sampling = session.tool === 'eyedropper' || (altActive && !(session.tool === 'move' && moveCopyAvailable) && !modifierSizing)
     inputRef.current.sampling = sampling
@@ -1031,7 +1038,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
             ? canvasCursors.move
             : hit === 'edge'
               ? canvasCursors.selectionMove
-            : canvasToolCursor(session.tool, contrastColor, available)
+            : selectionCreationCursor(selectionCrosshair, activeLayerEditable)
     } else canvas.style.cursor = canvasToolCursor(session.tool, contrastColor, available)
   }
 
@@ -1039,20 +1046,31 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     inputRef.current.syncModifierKeys(event)
     const point = localPointAt(event.clientX, event.clientY)
     if (point) inputRef.current.updatePointer({ point, clientX: event.clientX, clientY: event.clientY, ctrlKey: event.ctrlKey, altKey: event.altKey })
-    updateCursorAt(event.clientX, event.clientY, event.ctrlKey, event.altKey)
+    updateCursorAt(event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey)
   }
 
   useEffect(() => {
     const pointer = inputRef.current.pointer
     if (!pointer.visible) return
-    updateCursorAt(pointer.clientX, pointer.clientY, inputRef.current.ctrlHeld, inputRef.current.altHeld)
+    updateCursorAt(pointer.clientX, pointer.clientY, inputRef.current.ctrlHeld, inputRef.current.altHeld, inputRef.current.shiftHeld)
     scheduleDraw()
   // Cursor assets and the preview under a stationary pointer must change with the selected tool.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session.tool, session.selectionKind, session.primaryColor.r, session.primaryColor.g, session.primaryColor.b, session.primaryColor.a, activeLayerEditable])
+  }, [session.tool, session.selectionKind, session.selectionMode, session.selection, session.primaryColor.r, session.primaryColor.g, session.primaryColor.b, session.primaryColor.a, activeLayerEditable])
 
   const activeColor = (button = 0): RgbaColor => session.tool === 'eraser' ? TRANSPARENT : button === 2 ? session.secondaryColor : session.primaryColor
 
+  const commitPolygonLasso = (): void => {
+    const drag = inputRef.current.drag
+    if (drag?.kind !== 'polygon-lasso') return
+    inputRef.current.finish()
+    const before = drag.selectionStart ?? null
+    const path = polygonLassoClosedPathPoints(drag.path ?? [], balancedShiftLineEnabled)
+    const after = combineSelection(before, lassoSelection(session.document, path), drag.selectionMode ?? session.selectionMode)
+    useWorkspace.getState().commitSelectionChange(before, after, '多边形套索选区')
+    scheduleDraw()
+  }
+
   const handlePointerDown = (event: React.PointerEvent<HTMLCanvasElement>): void => {
     event.currentTarget.tabIndex = -1
     event.currentTarget.focus({ preventScroll: true })
@@ -1060,9 +1078,12 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     if (zoomPreviewStartRef.current) finishZoomPreview()
     if (state.activeId !== session.document.id) { state.setActive(session.document.id); return }
     if (event.button === 1 || (event.button === 0 && inputRef.current.spaceHeld)) {
-      const origin = { x: 0, y: 0 }
       const view = liveViewRef.current
-      inputRef.current.drag = { kind: 'pan', start: origin, last: origin, startPan: { x: view.panX, y: view.panY }, startClient: { x: event.clientX, y: event.clientY } }
+      inputRef.current.drag = createCanvasPanDrag(
+        { x: view.panX, y: view.panY },
+        { x: event.clientX, y: event.clientY },
+        inputRef.current.drag ?? undefined
+      )
       beginPanPreview()
       event.currentTarget.setPointerCapture(event.pointerId)
       event.currentTarget.style.cursor = canvasCursors.grabbing
@@ -1071,9 +1092,20 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     }
     const point = localPoint(event)
     if (!point) return
-    const selectionPoint = clampSelectionPoint(point)
     updateCursor(event)
     event.currentTarget.setPointerCapture(event.pointerId)
+    const activePolygon = inputRef.current.drag
+    if (session.tool === 'selection' && activePolygon?.kind === 'polygon-lasso' && (event.button === 0 || event.button === 2)) {
+      const path = activePolygon.path ?? []
+      if (shouldClosePolygonLasso(path, point, event.detail)) {
+        commitPolygonLasso()
+        return
+      }
+      activePolygon.path = appendPolygonLassoVertex(path, point)
+      activePolygon.last = point
+      scheduleDraw()
+      return
+    }
     const resizeEdge = canvasResizeHit(event)
     const activeResizePreview = canvasResizePreviewRef.current
     if (activeResizePreview) {
@@ -1091,7 +1123,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       && session.tool !== 'hand'
       && session.tool !== 'zoom'
       && session.tool !== 'move'
-      && (session.selectedGroupId !== null || session.selectedLayerIds.length > 1)
+      && (session.selectedGroupIds.length > 0 || session.selectedLayerIds.length > 1)
     if (focusesRasterLayer) state.selectLayer(session.document.activeLayerId)
     const hasRasterFocus = hasSelectedRasterLayer || focusesRasterLayer
     if (modifierActive(event.nativeEvent, 'brushSizeAdjust') && (session.tool === 'pencil' || session.tool === 'eraser') && !activeBrushImage?.intrinsicSize && event.button === 0) {
@@ -1111,20 +1143,20 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       draw()
     }
     const selectionTool = session.tool === 'selection'
-    const selectionMode = (): SelectionMode => modifierActive(event.nativeEvent, 'addToSelection') ? 'add' : session.selectionMode
+    const selectionMode = (): SelectionMode => event.button === 2 ? 'subtract' : (event.shiftKey || modifierActive(event.nativeEvent, 'addToSelection')) ? 'add' : session.selectionMode
     const editableLayer = getActiveLayer(session.document)
     const canEditLayer = hasRasterFocus && isLayerEffectivelyVisible(session.document, editableLayer) && !isLayerEffectivelyLocked(session.document, editableLayer)
     const eyedropperHeld = modifierActive(event.nativeEvent, 'temporaryEyedropper')
     const copyLayerHeld = modifierActive(event.nativeEvent, 'copyLayerOnDrag')
-    if (selectionTool && event.button === 0 && !canEditLayer && !eyedropperHeld) return
+    if (selectionTool && (event.button === 0 || event.button === 2) && !canEditLayer && !eyedropperHeld) return
     if (session.tool === 'move' && event.button === 0) {
-      const selectedMovableLayers = (session.selectedGroupId ? [] : session.selectedLayerIds)
+      const selectedMovableLayers = (session.selectedGroupIds.length > 0 ? [] : session.selectedLayerIds)
         .map((id) => session.document.layers.find((layer) => layer.id === id))
         .filter((layer): layer is RasterLayer => Boolean(layer && isLayerEffectivelyVisible(session.document, layer) && !isLayerEffectivelyLocked(session.document, layer)))
       const moveAllSelectedLayers = selectedMovableLayers.length > 1
       const target = moveAllSelectedLayers
         ? selectedMovableLayers.find((layer) => layer.id === session.document.activeLayerId) ?? selectedMovableLayers[0]
-        : session.moveAutoSelect ? topEditableLayerAt(point) : (canEditLayer ? editableLayer : null)
+        : session.moveAutoSelect ? (topEditableLayerAt(point) ?? (canEditLayer ? editableLayer : null)) : (canEditLayer ? editableLayer : null)
       if (!target) { if (eyedropperHeld) sampleAtPoint(); return }
       if (session.moveAutoSelect && !moveAllSelectedLayers) state.selectLayer(target.id)
       const layerIds = (moveAllSelectedLayers ? selectedMovableLayers.map((layer) => layer.id) : [target.id]).filter((id) => {
@@ -1138,7 +1170,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       inputRef.current.drag = {
         kind: 'move-layer', start: point, last: point, layerId: target.id,
         layerOffset: { x: target.offsetX, y: target.offsetY }, layerIds, layerOffsets, duplicateOnDrag: copyLayerHeld && layerIds.length === 1,
-        originalSelectedLayerIds: [...session.selectedLayerIds]
+        originalSelectedLayerIds: [...session.selectedLayerIds], selectionStart: cloneSelection(session.selection)
       }
       event.currentTarget.style.cursor = copyLayerHeld ? canvasCursors.copy : canvasCursors.move
       return
@@ -1158,24 +1190,30 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     if (lineConnectionActive(event.nativeEvent) && hasRasterFocus && (session.tool === 'pencil' || session.tool === 'eraser') && lineAnchor && event.button === 0) {
       if (canEditLayer) {
         const edit = beginPixelEdit(editableLayer.id)
-        paintLine(session.document, editableLayer, edit, lineAnchor.x, lineAnchor.y, point.x, point.y, session.brushSize, activeColor(), session.selection, session.brushShape, session.tool === 'pencil' || session.tool === 'eraser' ? activeBrushTexture : 'solid', session.brushTextureScale, session.tool === 'pencil' || session.tool === 'eraser' ? activeBrushImage : null, session.brushImageSettings, proceduralAntialiasStrength, activeBrushPaintMode, brushPatternOrigin(lineAnchor))
+        paintLine(session.document, editableLayer, edit, lineAnchor.x, lineAnchor.y, point.x, point.y, session.brushSize, activeColor(), session.selection, session.brushShape, session.tool === 'pencil' || session.tool === 'eraser' ? activeBrushTexture : 'solid', session.brushTextureScale, session.tool === 'pencil' || session.tool === 'eraser' ? activeBrushImage : null, session.brushImageSettings, proceduralAntialiasStrength, activeBrushPaintMode, brushPatternOrigin(lineAnchor), balancedShiftLineEnabled ? 'balanced' : 'raster')
         state.commitPixelEdit(edit, session.tool === 'eraser' ? '橡皮擦直线' : '铅笔直线')
         if (session.tool === 'eraser') state.setLastEraserPoint(point)
         else state.setLastPencilPoint(point)
       }
       return
     }
-    if (selectionTool && event.button === 0) {
+    if (selectionTool && (event.button === 0 || event.button === 2)) {
       const mode = selectionMode()
-      const hit = selectionHit(event)
+      const rawHit = selectionHit(event)
+      const transformInteraction = event.button === 0 && !event.shiftKey
+      const hit = transformInteraction && (mode === 'replace' || mode === 'add' || rawHit !== 'inside') ? rawHit : 'outside'
       if (eyedropperHeld) { sampleAtPoint(); return }
       if (hit === 'inside' && session.selection) {
-        const floating = session.pendingPaste
+        let floating = session.pendingPaste
+        const copy = modifierActive(event.nativeEvent, 'copySelectionContent')
+        if (floating && shouldRestartFloatingSelectionForCopy(floating.copy, copy)) {
+          state.commitFloatingPaste()
+          floating = null
+        }
         const source = floating?.source ?? captureSelectionTransform(session.document, session.selection)
         if (source) {
           const selectionStart = cloneSelection(session.selection)
-          const copy = modifierActive(event.nativeEvent, 'copySelectionContent')
-          inputRef.current.drag = { kind: 'move-content', start: point, last: point, selectionStart, selectionSource: source, previewEdit: floating?.previewEdit, copy: floating ? true : copy, floatingPaste: Boolean(floating), previewSelection: selectionStart, appliedSelection: selectionStart }
+          inputRef.current.drag = { kind: 'move-content', start: point, last: point, selectionStart, selectionSource: source, previewEdit: floating?.previewEdit, copy: floating ? floating.copy : copy, floatingPaste: Boolean(floating), previewSelection: selectionStart, appliedSelection: selectionStart }
           event.currentTarget.style.cursor = !floating && copy ? canvasCursors.copy : canvasCursors.move
           return
         }
@@ -1184,7 +1222,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       if (hit === 'edge' && session.selection) {
         if (session.pendingPaste) {
           const selectionStart = cloneSelection(session.selection)
-          inputRef.current.drag = { kind: 'move-content', start: point, last: point, selectionStart, selectionSource: session.pendingPaste.source, previewEdit: session.pendingPaste.previewEdit, copy: true, floatingPaste: true, previewSelection: selectionStart, appliedSelection: selectionStart }
+          inputRef.current.drag = { kind: 'move-content', start: point, last: point, selectionStart, selectionSource: session.pendingPaste.source, previewEdit: session.pendingPaste.previewEdit, copy: session.pendingPaste.copy, floatingPaste: true, previewSelection: selectionStart, appliedSelection: selectionStart }
           event.currentTarget.style.cursor = canvasCursors.selectionMove
           return
         }
@@ -1198,7 +1236,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         const source = floating?.source ?? captureSelectionTransform(session.document, session.selection)
         if (source) {
           const selectionStart = cloneSelection(session.selection)
-          inputRef.current.drag = { kind: 'rotate-content', start: point, last: point, selectionStart, selectionSource: source, previewEdit: floating?.previewEdit, angle: 0, copy: floating ? true : modifierActive(event.nativeEvent, 'copySelectionContent'), floatingPaste: Boolean(floating), previewSelection: selectionStart, appliedSelection: selectionStart }
+          inputRef.current.drag = { kind: 'rotate-content', start: point, last: point, selectionStart, selectionSource: source, previewEdit: floating?.previewEdit, angle: 0, copy: floating ? floating.copy : modifierActive(event.nativeEvent, 'copySelectionContent'), floatingPaste: Boolean(floating), previewSelection: selectionStart, appliedSelection: selectionStart }
         }
         event.currentTarget.style.cursor = canvasCursors.move
         return
@@ -1209,7 +1247,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         if (source) {
           const selectionStart = cloneSelection(session.selection)
           const modifiers = selectionTransformModifierState(event.nativeEvent)
-          inputRef.current.drag = { kind: 'transform-content', start: point, last: point, selectionStart, selectionSource: source, previewEdit: floating?.previewEdit, handle: hit as SelectionHandle, copy: floating ? true : modifiers.copy, floatingPaste: Boolean(floating), previewSelection: selectionStart, appliedSelection: selectionStart }
+          inputRef.current.drag = { kind: 'transform-content', start: point, last: point, selectionStart, selectionSource: source, previewEdit: floating?.previewEdit, handle: hit as SelectionHandle, copy: floating ? floating.copy : modifiers.copy, floatingPaste: Boolean(floating), previewSelection: selectionStart, appliedSelection: selectionStart }
           event.currentTarget.style.cursor = canvasCursors.move
         }
         return
@@ -1223,12 +1261,16 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         draw()
         return
       }
-      if (session.selectionKind === 'lasso') { inputRef.current.drag = { kind: 'lasso', start: point, last: point, selectionStart: cloneSelection(session.selection), selectionMode: mode, path: [point] }; return }
+      if (session.selectionKind === 'lasso') { inputRef.current.drag = { kind: 'lasso', start: point, last: point, selectionStart: cloneSelection(session.selection), selectionMode: mode, previewSelection: cloneSelection(session.selection), path: [point] }; return }
+      if (session.selectionKind === 'polygon-lasso') { inputRef.current.drag = { kind: 'polygon-lasso', start: point, last: point, selectionStart: cloneSelection(session.selection), selectionMode: mode, previewSelection: cloneSelection(session.selection), path: [point] }; return }
     }
     if (eyedropperHeld && (event.button === 0 || event.button === 2)) { sampleAtPoint(); return }
     if (shouldStartCanvasPan(session.tool, event.shiftKey, selectionTool)) {
       const view = liveViewRef.current
-      inputRef.current.drag = { kind: 'pan', start: point, last: point, startPan: { x: view.panX, y: view.panY }, startClient: { x: event.clientX, y: event.clientY } }
+      inputRef.current.drag = createCanvasPanDrag(
+        { x: view.panX, y: view.panY },
+        { x: event.clientX, y: event.clientY }
+      )
       beginPanPreview()
       event.currentTarget.setPointerCapture(event.pointerId)
       event.currentTarget.style.cursor = canvasCursors.grabbing
@@ -1241,11 +1283,9 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     }
     if (session.tool === 'fill') { if (!canEditLayer) return; const edit = floodFill(session.document, editableLayer, point.x, point.y, activeColor(event.button), session.selection, session.fillMode === 'contiguous', activeBrushImage, session.brushSize, session.brushImageSettings, activeBrushTexture, Math.max(1, Math.round(session.brushSize / 8)), proceduralAntialiasStrength, activeBrushPaintMode); if (edit) state.commitPixelEdit(edit, activeBrushImage || activeBrushTexture !== 'solid' ? '笔刷填充' : session.fillMode === 'contiguous' ? '连续填充' : '不连续填充'); return }
     if (session.tool === 'eyedropper') { sampleAtPoint(false); return }
-    if (session.tool === 'selection' && (session.selectionKind === 'rectangle' || session.selectionKind === 'ellipse')) {
+    if (session.tool === 'selection' && (session.selectionKind === 'rectangle' || session.selectionKind === 'ellipse') && (event.button === 0 || event.button === 2)) {
       const mode = selectionMode()
-      inputRef.current.drag = { kind: 'marquee', start: point, last: point, selectionStart: cloneSelection(session.selection), selectionMode: mode, constrain: event.shiftKey }
-      const initial = session.selectionKind === 'ellipse' ? ellipseSelection(selectionPoint.x, selectionPoint.y, 1, 1) : rectSelection(selectionPoint.x, selectionPoint.y, 1, 1)
-      state.setSelection(combineSelection(session.selection, initial, mode))
+      inputRef.current.drag = { kind: 'marquee', start: point, last: point, startClient: { x: event.clientX, y: event.clientY }, selectionStart: cloneSelection(session.selection), selectionMode: mode, constrain: false }
       return
     }
     if (session.tool === 'shape') { if (!canEditLayer) return; inputRef.current.drag = { kind: 'shape', start: point, last: point, constrain: event.shiftKey }; draw(); return }
@@ -1271,6 +1311,23 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       event.currentTarget.style.cursor = canvasCursors.grabbing
       return
     }
+    const autoPanDrag = inputRef.current.drag
+    if (autoPanDrag && ['marquee', 'lasso', 'polygon-lasso', 'move-selection', 'move-content', 'transform-content', 'rotate-content'].includes(autoPanDrag.kind)) {
+      const bounds = stageBounds()
+      const edge = 28
+      const edgeSpeed = (position: number, start: number, end: number): number => position < start + edge
+        ? -Math.min(16, Math.max(2, (start + edge - position) * 0.4))
+        : position > end - edge ? Math.min(16, Math.max(2, (position - (end - edge)) * 0.4)) : 0
+      const screenX = edgeSpeed(event.clientX, bounds.left, bounds.right)
+      const screenY = edgeSpeed(event.clientY, bounds.top, bounds.bottom)
+      if (screenX !== 0 || screenY !== 0) {
+        const view = liveViewRef.current
+        const delta = viewPanDeltaFromScreen(-screenX, -screenY, view.rotation, rotationIndicatorPosition, view.mirrored, view.mirroredVertical)
+        liveViewRef.current = { ...view, panX: view.panX + delta.x, panY: view.panY + delta.y }
+        useWorkspace.getState().setView({ panX: liveViewRef.current.panX, panY: liveViewRef.current.panY })
+        applyRotationStyle(liveViewRef.current)
+      }
+    }
     updateCursor(event)
     inputRef.current.shiftLinePreview = Boolean(lineConnectionActive(event.nativeEvent) && !canvasResizePreviewRef.current && !inputRef.current.spaceHeld && (session.tool === 'pencil' || session.tool === 'eraser') && lineAnchor)
     const point = localPoint(event)
@@ -1366,6 +1423,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
           active.document.activeLayerId = copy.id
           active.selectedLayerIds = [copy.id]
           active.selectedGroupId = null
+          active.selectedGroupIds = []
           drag.duplicatedLayerId = copy.id
           drag.duplicatedLayer = copy
           drag.duplicatedLayerIndex = insertionIndex
@@ -1380,6 +1438,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
           layer.offsetX = offset.x + distanceX
           layer.offsetY = offset.y + distanceY
         }
+        if (drag.selectionStart) active.selection = shiftSelection(drag.selectionStart, distanceX, distanceY, active.document.width, active.document.height)
       }, false)
       compositeCacheRef.current.invalidateAll()
       scheduleDraw()
@@ -1409,6 +1468,8 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     }
     if (drag.kind === 'shape') { drag.constrain = event.shiftKey; scheduleDraw(); return }
     if (drag.kind === 'marquee') {
+      drag.moved = drag.moved || selectionGestureMoved(drag.startClient, { x: event.clientX, y: event.clientY })
+      if (!drag.moved) { scheduleDraw(); return }
       drag.constrain = event.shiftKey
       const mode = drag.selectionMode ?? session.selectionMode
       // Generate from the true drag bounds first. Clamping the bounding box
@@ -1419,7 +1480,8 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
         ? ellipseSelection(bounds.x, bounds.y, bounds.width, bounds.height)
         : rectSelection(bounds.x, bounds.y, bounds.width, bounds.height)
       const incoming = transformSelectionMask(rawIncoming, rawIncoming, session.document.width, session.document.height)
-      state.setSelection(combineSelection(drag.selectionStart ?? null, incoming, mode)); return
+      drag.previewSelection = combineSelection(drag.selectionStart ?? null, incoming, mode)
+      scheduleDraw(); return
     }
     if (drag.kind === 'magic-preview') {
       const mode = drag.selectionMode ?? session.selectionMode
@@ -1429,10 +1491,13 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       return
     }
     if (drag.kind === 'lasso') {
-      drag.path = [...(drag.path ?? []), point]
+      const path = drag.path ?? []
+      const last = path.at(-1)
+      if (!last || last.x !== point.x || last.y !== point.y) drag.path = [...path, point]
       scheduleDraw()
       return
     }
+    if (drag.kind === 'polygon-lasso') { scheduleDraw(); return }
     if ((drag.kind === 'move-selection' || drag.kind === 'move-content') && drag.selectionStart) {
       const start = drag.selectionStart
       // Keep at least one selected pixel on the canvas, while allowing a
@@ -1473,6 +1538,11 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
   }
 
   const handlePointerUp = (event: React.PointerEvent<HTMLCanvasElement>): void => {
+    if (inputRef.current.drag?.kind === 'polygon-lasso') {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId)
+      scheduleDraw()
+      return
+    }
     const drag = inputRef.current.finish()
     if (!drag) return
     if (drag.kind === 'canvas-resize' || drag.kind === 'canvas-move') flushCanvasResizePreview()
@@ -1487,6 +1557,8 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     const state = useWorkspace.getState()
     if (drag.kind === 'pan') {
       finishPanPreview()
+      const resumedDrag = restoreCanvasDragAfterPan(drag, localPoint(event) ?? drag.resumeDrag?.last ?? drag.last)
+      if (resumedDrag) inputRef.current.drag = resumedDrag
       updateCursor(event)
       draw()
       return
@@ -1511,7 +1583,7 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     }
     if (drag.kind === 'sample-color') {
       inputRef.current.sampling = false
-      if (!drag.temporarySampling) {
+      if (!drag.temporarySampling && eyedropperSwitchToPencil) {
         state.setTool('pencil')
         event.currentTarget.style.cursor = canvasToolCursor('pencil', session.primaryColor)
       } else updateCursor(event)
@@ -1526,6 +1598,8 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     }
     if (drag.kind === 'move-layer' && !drag.duplicatedLayer && drag.layerIds && drag.layerIds.length > 1 && drag.layerOffsets) {
       const before = drag.layerOffsets
+      const beforeSelection = cloneSelection(drag.selectionStart ?? null)
+      const afterSelection = cloneSelection(session.selection)
       const after = Object.fromEntries(drag.layerIds.map((id) => {
         const layer = session.document.layers.find((candidate) => candidate.id === id)
         return [id, { x: layer?.offsetX ?? before[id].x, y: layer?.offsetY ?? before[id].y }]
@@ -1533,8 +1607,8 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       if (drag.layerIds.some((id) => after[id].x !== before[id].x || after[id].y !== before[id].y)) {
         state.pushHistory({
           label: '移动所选图层内容', bytes: drag.layerIds.length * 32,
-          undo: () => { for (const id of drag.layerIds ?? []) { const layer = session.document.layers.find((candidate) => candidate.id === id); const offset = before[id]; if (layer && offset) { layer.offsetX = offset.x; layer.offsetY = offset.y } } },
-          redo: () => { for (const id of drag.layerIds ?? []) { const layer = session.document.layers.find((candidate) => candidate.id === id); const offset = after[id]; if (layer && offset) { layer.offsetX = offset.x; layer.offsetY = offset.y } } }
+          undo: () => { for (const id of drag.layerIds ?? []) { const layer = session.document.layers.find((candidate) => candidate.id === id); const offset = before[id]; if (layer && offset) { layer.offsetX = offset.x; layer.offsetY = offset.y } } session.selection = cloneSelection(beforeSelection) },
+          redo: () => { for (const id of drag.layerIds ?? []) { const layer = session.document.layers.find((candidate) => candidate.id === id); const offset = after[id]; if (layer && offset) { layer.offsetX = offset.x; layer.offsetY = offset.y } } session.selection = cloneSelection(afterSelection) }
         })
         state.mutateActive(() => {}, true)
       }
@@ -1544,6 +1618,8 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       if (layer && (layer.offsetX !== drag.layerOffset.x || layer.offsetY !== drag.layerOffset.y)) {
         const before = { ...drag.layerOffset }
         const after = { x: layer.offsetX, y: layer.offsetY }
+        const beforeSelection = cloneSelection(drag.selectionStart ?? null)
+        const afterSelection = cloneSelection(session.selection)
         state.pushHistory({
           label: '移动图层内容', bytes: 32,
           undo: () => {
@@ -1552,8 +1628,10 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
               session.document.activeLayerId = drag.layerId!
               session.selectedLayerIds = drag.originalSelectedLayerIds?.length ? [...drag.originalSelectedLayerIds] : [drag.layerId!]
               session.selectedGroupId = null
+              session.selectedGroupIds = []
             }
             else { const target = session.document.layers.find((candidate) => candidate.id === layerId); if (target) { target.offsetX = before.x; target.offsetY = before.y } }
+            session.selection = cloneSelection(beforeSelection)
           },
           redo: () => {
             if (drag.duplicatedLayer) {
@@ -1562,7 +1640,9 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
               session.document.activeLayerId = layerId
               session.selectedLayerIds = [layerId]
               session.selectedGroupId = null
+              session.selectedGroupIds = []
             } else { const target = session.document.layers.find((candidate) => candidate.id === layerId); if (target) { target.offsetX = after.x; target.offsetY = after.y } }
+            session.selection = cloneSelection(afterSelection)
           }
         })
         state.mutateActive(() => {}, true)
@@ -1573,11 +1653,18 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
       const layer = getActiveLayer(session.document)
       if (!isLayerEffectivelyLocked(session.document, layer)) {
         const edit = beginPixelEdit(layer.id)
-        paintShape(session.document, layer, edit, shapeBounds(drag.start, drag.last, drag.constrain), session.shapeKind, session.primaryColor, session.selection)
-        state.commitPixelEdit(edit, session.shapeKind === 'ellipse' ? '绘制圆形' : '绘制矩形')
+        paintShape(session.document, layer, edit, shapeBounds(drag.start, drag.last, drag.constrain, session.shapeRatio), session.shapeKind, session.primaryColor, session.selection)
+        const ellipse = session.shapeKind === 'ellipse' || session.shapeKind === 'ellipse-outline'
+        state.commitPixelEdit(edit, ellipse ? '绘制椭圆' : '绘制矩形')
       }
     }
-    if (drag.kind === 'marquee') state.commitSelectionChange(drag.selectionStart ?? null, session.selection, '创建选区')
+    if (drag.kind === 'marquee') {
+      const moved = drag.moved || selectionGestureMoved(drag.startClient, { x: event.clientX, y: event.clientY })
+      const after = finalizeMarqueeSelection(drag.selectionStart ?? null, drag.previewSelection ?? session.selection, moved, drag.selectionMode ?? session.selectionMode)
+      state.commitSelectionChange(drag.selectionStart ?? null, after, '创建选区')
+      updateCursor(event)
+      scheduleDraw()
+    }
     if (drag.kind === 'lasso') {
       const mode = drag.selectionMode ?? session.selectionMode
       const before = drag.selectionStart ?? null
@@ -1588,11 +1675,26 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
     if (drag.kind === 'move-selection' && drag.selectionStart && drag.previewSelection) state.commitSelectionChange(drag.selectionStart, drag.previewSelection, '移动选框')
     if ((drag.kind === 'move-content' || drag.kind === 'transform-content' || drag.kind === 'rotate-content') && drag.selectionStart && drag.previewSelection) {
       if (drag.floatingPaste && drag.previewEdit) state.updateFloatingPastePreview(drag.previewEdit, drag.previewSelection)
+      else if (drag.kind === 'move-content' && drag.previewEdit && drag.selectionSource) state.beginFloatingSelectionTransform(drag.selectionSource, drag.previewEdit, drag.selectionStart, drag.previewSelection, Boolean(drag.copy), drag.copy ? '复制选区内容' : '移动选区内容')
       else state.commitSelectionTransform(drag.previewEdit ?? null, drag.selectionStart, drag.previewSelection, drag.copy ? '复制选区内容' : '移动选区内容')
     }
     draw()
   }
 
+  useEffect(() => {
+    const keyDown = (event: KeyboardEvent): void => {
+      if (inputRef.current.drag?.kind !== 'polygon-lasso') return
+      if (event.key === 'Enter') commitPolygonLasso()
+      else if (event.key === 'Escape') { inputRef.current.finish(); scheduleDraw() }
+      else return
+      event.preventDefault()
+      event.stopImmediatePropagation()
+    }
+    window.addEventListener('keydown', keyDown, true)
+    return () => window.removeEventListener('keydown', keyDown, true)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session.document.id, session.selectionMode])
+
   const onWheel = (event: React.WheelEvent<HTMLCanvasElement>): void => {
     const canvas = canvasRef.current
     if (!canvas) return
@@ -1623,5 +1725,5 @@ export function CanvasStage({ session }: { session: DocumentSession }) {
   const pointerUp = (event: React.PointerEvent<HTMLCanvasElement>): void => measurePointerInput('pointer-up', () => handlePointerUp(event))
 
   const rotationStyle = { transform: 'none', transformOrigin: '50% 50%' }
-  return <PerformanceProfiler id="CanvasStage"><div ref={stageRef} className="stage-surface"><canvas ref={canvasRef} style={rotationStyle} className="stage-canvas" aria-label="像素画布" onPointerDown={pointerDown} onPointerMove={pointerMove} onPointerUp={pointerUp} onPointerCancel={pointerUp} onPointerLeave={(event) => { inputRef.current.pointer.visible = false; inputRef.current.shiftLinePreview = false; inputRef.current.sampling = false; inputRef.current.altHeld = false; inputRef.current.ctrlHeld = false; if (!inputRef.current.drag) event.currentTarget.style.cursor = canvasResizePreviewRef.current ? canvasCursors.unavailable : inputRef.current.spaceHeld ? canvasCursors.grab : canvasToolCursor(session.tool, session.primaryColor); draw() }} onPointerEnter={(event) => { updateCursor(event); inputRef.current.shiftLinePreview = lineConnectionActive(event.nativeEvent) && !canvasResizePreviewRef.current && !inputRef.current.sampling && (session.tool === 'pencil' || session.tool === 'eraser') && Boolean(lineAnchor); draw() }} onContextMenu={(event) => event.preventDefault()} onWheel={onWheel} /><canvas ref={selectionCanvasRef} style={rotationStyle} className="stage-selection-overlay" aria-hidden="true" /><div ref={rotationIndicatorRef} className="rotation-indicator" hidden aria-hidden="true"><span className="rotation-indicator-background">{[rotationBackground1, rotationBackground2, rotationBackground3, rotationBackground4, rotationBackground5, rotationBackground6].map((source) => <img key={source} src={source} alt="" />)}</span><span ref={rotationPointerRef} className="rotation-indicator-pointer"><img src={rotationPointer} alt="" /></span></div></div></PerformanceProfiler>
+  return <PerformanceProfiler id="CanvasStage"><div ref={stageRef} className="stage-surface"><canvas ref={canvasRef} style={rotationStyle} className="stage-canvas" aria-label="像素画布" onPointerDown={pointerDown} onPointerMove={pointerMove} onPointerUp={pointerUp} onPointerCancel={pointerUp} onDoubleClick={(event) => { if (inputRef.current.drag?.kind !== 'polygon-lasso') return; event.preventDefault(); commitPolygonLasso() }} onPointerLeave={(event) => { inputRef.current.pointer.visible = false; inputRef.current.shiftLinePreview = false; inputRef.current.sampling = false; inputRef.current.altHeld = false; inputRef.current.ctrlHeld = false; inputRef.current.shiftHeld = false; if (!inputRef.current.drag) event.currentTarget.style.cursor = canvasResizePreviewRef.current ? canvasCursors.unavailable : inputRef.current.spaceHeld ? canvasCursors.grab : canvasToolCursor(session.tool, session.primaryColor); draw() }} onPointerEnter={(event) => { updateCursor(event); inputRef.current.shiftLinePreview = lineConnectionActive(event.nativeEvent) && !canvasResizePreviewRef.current && !inputRef.current.sampling && (session.tool === 'pencil' || session.tool === 'eraser') && Boolean(lineAnchor); draw() }} onContextMenu={(event) => event.preventDefault()} onWheel={onWheel} /><canvas ref={selectionCanvasRef} style={rotationStyle} className="stage-selection-overlay" aria-hidden="true" /><div ref={rotationIndicatorRef} className="rotation-indicator" hidden aria-hidden="true"><span className="rotation-indicator-background">{[rotationBackground1, rotationBackground2, rotationBackground3, rotationBackground4, rotationBackground5, rotationBackground6].map((source) => <img key={source} src={source} alt="" />)}</span><span ref={rotationPointerRef} className="rotation-indicator-pointer"><img src={rotationPointer} alt="" /></span></div></div></PerformanceProfiler>
 }
diff --git a/src/renderer/src/components/ColorPicker.tsx b/src/renderer/src/components/ColorPicker.tsx
index 45468ef..8a4a426 100644
--- a/src/renderer/src/components/ColorPicker.tsx
+++ b/src/renderer/src/components/ColorPicker.tsx
@@ -642,8 +642,8 @@ export function ColorPicker({ color, secondaryColor, onChange, onSecondaryChange
           : <input className="value-strip-input" aria-label={`${label}明度`} style={{ '--value-color': `rgb(${fullValueColor.r} ${fullValueColor.g} ${fullValueColor.b})`, ...(valueStripGradient ? { background: valueStripGradient } : {}) } as React.CSSProperties} type="range" min="0" max="1000" value={valueSliderValue} onContextMenu={(event) => event.preventDefault()} onPointerDown={(event) => beginStripPointer(event, 'value')} onPointerMove={(event) => moveStripPointer(event, 'value')} onPointerUp={endStripPointer} onPointerCancel={endStripPointer} onInput={(event) => { if (!pointerInputActiveRef.current) updateStripFromNativeInput('value', Number(event.currentTarget.value), 1000) }} />}
         <input className="alpha-strip-input" aria-label={`${label}透明度`} style={{ '--alpha-color': `rgb(${stripColor.r} ${stripColor.g} ${stripColor.b})`, ...(alphaStripGradient ? { background: `${alphaStripGradient}, repeating-conic-gradient(#6e7278 0 25%, #b7b9bc 0 50%) 50% / 8px 8px` } : {}) } as React.CSSProperties} type="range" min="0" max="255" value={alphaSliderValue} onContextMenu={(event) => event.preventDefault()} onPointerDown={(event) => beginStripPointer(event, 'alpha')} onPointerMove={(event) => moveStripPointer(event, 'alpha')} onPointerUp={endStripPointer} onPointerCancel={endStripPointer} onInput={(event) => { if (!pointerInputActiveRef.current) updateStripFromNativeInput('alpha', Number(event.currentTarget.value), 255) }} />
       </div>
-       <ColorValueControl color={color} onChange={onChange} label={label} roleLabel="前景" />
-       {secondaryColor && onSecondaryChange && <ColorValueControl color={secondaryColor} onChange={onSecondaryChange} label={label} roleLabel="背景" className="color-secondary-value-control" />}
+       <ColorValueControl color={color} onChange={onChange} label={label} roleLabel="前景" storageKey="palette-foreground" />
+       {secondaryColor && onSecondaryChange && <ColorValueControl color={secondaryColor} onChange={onSecondaryChange} label={label} roleLabel="背景" storageKey="palette-background" className="color-secondary-value-control" />}
      </div>
   </div>
 }
diff --git a/src/renderer/src/components/ColorValueControl.test.tsx b/src/renderer/src/components/ColorValueControl.test.tsx
index 54dd733..ab7b74c 100644
--- a/src/renderer/src/components/ColorValueControl.test.tsx
+++ b/src/renderer/src/components/ColorValueControl.test.tsx
@@ -10,6 +10,7 @@ describe('ColorValueControl', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '背景颜色 浅色' }))
 
+    expect(screen.getByRole('dialog', { name: '颜色编辑 浅色' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'RGB', selected: true })).toBeInTheDocument()
     expect(screen.getByLabelText('当前颜色')).toBeInTheDocument()
     expect(screen.getByRole('spinbutton', { name: '背景颜色 R' })).toHaveValue('41')
@@ -34,4 +35,53 @@ describe('ColorValueControl', () => {
     expect(document.querySelector('.color-editor-preview')).not.toBeInTheDocument()
     expect(container.querySelector('.color-value-trigger')).toBeInTheDocument()
   })
+
+  it('closes the draggable editor from its title bar', () => {
+    render(<ColorValueControl color={{ r: 41, g: 121, b: 255, a: 255 }} onChange={vi.fn()} label="颜色值" />)
+    fireEvent.click(screen.getByRole('button', { name: '颜色值' }))
+    expect(screen.getByRole('dialog', { name: '颜色编辑' })).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: '关闭颜色编辑' }))
+    expect(screen.queryByRole('dialog', { name: '颜色编辑' })).not.toBeInTheDocument()
+  })
+
+  it('closes an unmoved transient editor after clicking outside', () => {
+    render(<ColorValueControl color={{ r: 255, g: 0, b: 0, a: 255 }} onChange={vi.fn()} label="颜色" roleLabel="前景" storageKey="foreground" />)
+    fireEvent.click(screen.getByRole('button', { name: '颜色 前景' }))
+    fireEvent.pointerDown(document.body)
+
+    expect(screen.queryByRole('dialog', { name: '颜色编辑 前景色' })).not.toBeInTheDocument()
+  })
+
+  it('keeps a moved foreground editor resident while opening the background editor', () => {
+    render(<><ColorValueControl color={{ r: 255, g: 0, b: 0, a: 255 }} onChange={vi.fn()} label="颜色" roleLabel="前景" storageKey="foreground" /><ColorValueControl color={{ r: 0, g: 0, b: 255, a: 255 }} onChange={vi.fn()} label="颜色" roleLabel="背景" storageKey="background" /></>)
+
+    fireEvent.click(screen.getByRole('button', { name: '颜色 前景' }))
+    const foreground = screen.getByRole('dialog', { name: '颜色编辑 前景色' })
+    fireEvent.pointerDown(foreground.querySelector('header')!, { button: 0, clientX: 20, clientY: 20 })
+    fireEvent.pointerMove(window, { clientX: 40, clientY: 40 })
+    fireEvent.pointerUp(window)
+    fireEvent.click(screen.getByRole('button', { name: '颜色 背景' }))
+
+    expect(screen.getByRole('dialog', { name: '颜色编辑 前景色' })).toBeInTheDocument()
+    expect(screen.getByRole('dialog', { name: '颜色编辑 背景色' })).toBeInTheDocument()
+    expect(foreground.querySelectorAll('.floating-resize-handle')).toHaveLength(8)
+  })
+
+  it('returns to its default position after closing and reopening', () => {
+    render(<ColorValueControl color={{ r: 255, g: 0, b: 0, a: 255 }} onChange={vi.fn()} label="颜色" roleLabel="前景" storageKey="foreground" />)
+    const trigger = screen.getByRole('button', { name: '颜色 前景' })
+    fireEvent.click(trigger)
+    const first = screen.getByRole('dialog', { name: '颜色编辑 前景色' })
+    const defaultLeft = first.style.left
+    fireEvent.pointerDown(first.querySelector('header')!, { button: 0, clientX: 20, clientY: 20 })
+    fireEvent.pointerMove(window, { clientX: 180, clientY: 100 })
+    fireEvent.pointerUp(window)
+    expect(first.style.left).not.toBe(defaultLeft)
+
+    fireEvent.click(screen.getByRole('button', { name: '关闭颜色编辑' }))
+    fireEvent.click(trigger)
+
+    expect(screen.getByRole('dialog', { name: '颜色编辑 前景色' }).style.left).toBe(defaultLeft)
+  })
 })
diff --git a/src/renderer/src/components/ColorValueControl.tsx b/src/renderer/src/components/ColorValueControl.tsx
index 0854db6..952eea1 100644
--- a/src/renderer/src/components/ColorValueControl.tsx
+++ b/src/renderer/src/components/ColorValueControl.tsx
@@ -1,9 +1,11 @@
 import { createPortal } from 'react-dom'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { X } from 'lucide-react'
 import type { RgbaColor } from '@shared/types'
 import { clampByte } from '@/core/raster'
 import { colorFromValues, colorToValues, colorValueFields, parseRgbaHex, rgbaHex, type ColorValueMode } from '@/core/color-values'
 import { NumberInput } from './NumberInput'
+import { PanelResizeHandles, type ResizeDirection } from './floating-panel'
 
 interface ColorValueControlProps {
   color: RgbaColor
@@ -11,6 +13,7 @@ interface ColorValueControlProps {
   label: string
   roleLabel?: string
   className?: string
+  storageKey?: string
 }
 
 const modeLabels: Array<{ value: ColorValueMode; label: string }> = [
@@ -20,6 +23,11 @@ const modeLabels: Array<{ value: ColorValueMode; label: string }> = [
   { value: 'gray', label: 'Gray' }
 ]
 
+const COLOR_EDITOR_MIN_WIDTH = 420
+const COLOR_EDITOR_MIN_HEIGHT = 240
+const COLOR_EDITOR_MAX_WIDTH = 720
+const COLOR_EDITOR_MAX_HEIGHT = 480
+
 const cssColor = (color: RgbaColor): string => `rgb(${color.r} ${color.g} ${color.b} / ${color.a / 255})`
 const colorGradient = (mode: ColorValueMode, values: Record<string, number>, fallback: RgbaColor, field: ReturnType<typeof colorValueFields>[number]): string => {
   const stops = [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
@@ -29,13 +37,22 @@ const colorGradient = (mode: ColorValueMode, values: Record<string, number>, fal
   return `linear-gradient(90deg, ${stops.join(', ')})`
 }
 
-export function ColorValueControl({ color, onChange, label, roleLabel, className = '' }: ColorValueControlProps) {
+export function ColorValueControl({ color, onChange, label, roleLabel, className = '', storageKey }: ColorValueControlProps) {
   const [open, setOpen] = useState(false)
   const [mode, setMode] = useState<ColorValueMode>('rgb')
   const [hexText, setHexText] = useState(() => rgbaHex(color))
   const [position, setPosition] = useState({ left: 8, top: 8 })
+  const [size, setSize] = useState({ width: 468, height: 264 })
+  const [resident, setResident] = useState(false)
   const triggerRef = useRef<HTMLButtonElement>(null)
   const popoverRef = useRef<HTMLDivElement>(null)
+  const dragRef = useRef<{ pointerX: number; pointerY: number; left: number; top: number } | null>(null)
+  const resizeRef = useRef<{ direction: ResizeDirection; pointerX: number; pointerY: number; left: number; top: number; width: number; height: number } | null>(null)
+  const positionRef = useRef(position)
+  const sizeRef = useRef(size)
+  const residentRef = useRef(resident)
+  const sizeKey = storageKey ? `moonsprite.color-editor-size.${storageKey}` : null
+  const positionedRef = useRef(false)
 
   useEffect(() => setHexText(rgbaHex(color)), [color.r, color.g, color.b, color.a])
 
@@ -45,26 +62,100 @@ export function ColorValueControl({ color, onChange, label, roleLabel, className
       const trigger = triggerRef.current?.getBoundingClientRect()
       const popover = popoverRef.current?.getBoundingClientRect()
       if (!trigger || !popover) return
-      const left = Math.max(8, Math.min(window.innerWidth - popover.width - 8, trigger.right - popover.width))
-      const top = window.innerHeight - trigger.bottom >= popover.height + 6
+      let nextSize = sizeRef.current
+      if (!positionedRef.current && sizeKey) {
+        try {
+          const stored = JSON.parse(localStorage.getItem(sizeKey) ?? 'null') as { width?: number; height?: number } | null
+          if (stored && Number.isFinite(stored.width) && Number.isFinite(stored.height)) {
+            nextSize = {
+              width: Math.max(COLOR_EDITOR_MIN_WIDTH, Math.min(COLOR_EDITOR_MAX_WIDTH, window.innerWidth - 16, stored.width!)),
+              height: Math.max(COLOR_EDITOR_MIN_HEIGHT, Math.min(COLOR_EDITOR_MAX_HEIGHT, window.innerHeight - 16, stored.height!))
+            }
+            sizeRef.current = nextSize
+            setSize(nextSize)
+          }
+        } catch { localStorage.removeItem(sizeKey) }
+      }
+      const left = Math.max(8, Math.min(window.innerWidth - nextSize.width - 8, trigger.right - nextSize.width))
+      const top = window.innerHeight - trigger.bottom >= nextSize.height + 6
         ? trigger.bottom + 5
-        : Math.max(8, trigger.top - popover.height - 5)
-      setPosition({ left, top })
+        : Math.max(8, trigger.top - nextSize.height - 5)
+      positionRef.current = { left, top }
+      setPosition(positionRef.current)
+      positionedRef.current = true
     }
     place()
     window.addEventListener('resize', place)
     return () => window.removeEventListener('resize', place)
-  }, [open, mode])
+  }, [open, sizeKey])
 
   useEffect(() => {
     if (!open) return
-    const close = (event: PointerEvent): void => {
+    const move = (event: PointerEvent): void => {
+      const drag = dragRef.current
+      const popover = popoverRef.current
+      const resize = resizeRef.current
+      if (resize) {
+        const deltaX = event.clientX - resize.pointerX
+        const deltaY = event.clientY - resize.pointerY
+        let left = resize.left
+        let top = resize.top
+        let width = resize.width
+        let height = resize.height
+        if (resize.direction.includes('e')) width = Math.max(COLOR_EDITOR_MIN_WIDTH, Math.min(COLOR_EDITOR_MAX_WIDTH, window.innerWidth - resize.left - 8, resize.width + deltaX))
+        if (resize.direction.includes('s')) height = Math.max(COLOR_EDITOR_MIN_HEIGHT, Math.min(COLOR_EDITOR_MAX_HEIGHT, window.innerHeight - resize.top - 8, resize.height + deltaY))
+        if (resize.direction.includes('w')) { width = Math.max(COLOR_EDITOR_MIN_WIDTH, Math.min(COLOR_EDITOR_MAX_WIDTH, resize.left + resize.width - 8, resize.width - deltaX)); left = resize.left + resize.width - width }
+        if (resize.direction.includes('n')) { height = Math.max(COLOR_EDITOR_MIN_HEIGHT, Math.min(COLOR_EDITOR_MAX_HEIGHT, resize.top + resize.height - 8, resize.height - deltaY)); top = resize.top + resize.height - height }
+        positionRef.current = { left, top }
+        sizeRef.current = { width, height }
+        setPosition(positionRef.current)
+        setSize(sizeRef.current)
+        return
+      }
+      if (!drag || !popover) return
+      const bounds = popover.getBoundingClientRect()
+      if (!residentRef.current && Math.hypot(event.clientX - drag.pointerX, event.clientY - drag.pointerY) >= 3) {
+        residentRef.current = true
+        setResident(true)
+      }
+      const next = {
+        left: Math.max(8, Math.min(window.innerWidth - bounds.width - 8, drag.left + event.clientX - drag.pointerX)),
+        top: Math.max(8, Math.min(window.innerHeight - bounds.height - 8, drag.top + event.clientY - drag.pointerY))
+      }
+      positionRef.current = next
+      setPosition(next)
+    }
+    const end = (): void => {
+      if (resizeRef.current && sizeKey) localStorage.setItem(sizeKey, JSON.stringify(sizeRef.current))
+      dragRef.current = null
+      resizeRef.current = null
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', end)
+    window.addEventListener('pointercancel', end)
+    return () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', end)
+      window.removeEventListener('pointercancel', end)
+    }
+  }, [open, sizeKey])
+
+  useEffect(() => {
+    residentRef.current = resident
+  }, [resident])
+
+  useEffect(() => {
+    if (!open || resident) return
+    const closeTransient = (event: PointerEvent): void => {
       const target = event.target as Node
-      if (!triggerRef.current?.contains(target) && !popoverRef.current?.contains(target)) setOpen(false)
+      if (!popoverRef.current?.contains(target) && !triggerRef.current?.contains(target)) {
+        positionedRef.current = false
+        setOpen(false)
+      }
     }
-    window.addEventListener('pointerdown', close, true)
-    return () => window.removeEventListener('pointerdown', close, true)
-  }, [open])
+    window.addEventListener('pointerdown', closeTransient, true)
+    return () => window.removeEventListener('pointerdown', closeTransient, true)
+  }, [open, resident])
 
   const commitHex = (): void => {
     const next = parseRgbaHex(hexText, color.a)
@@ -75,13 +166,21 @@ export function ColorValueControl({ color, onChange, label, roleLabel, className
   }
 
   const values = colorToValues(color, mode)
+  const fields = colorValueFields(mode)
   const updateValue = (key: string, value: number): void => {
     const next = colorFromValues(mode, { ...values, [key]: value }, color)
     onChange(next)
     setHexText(rgbaHex(next))
   }
 
-  const editor = open ? <div ref={popoverRef} className="color-editor-popover" role="dialog" aria-label={`${label}颜色编辑`} style={position}>
+  const roleTitle = roleLabel ? (roleLabel.endsWith('色') ? roleLabel : `${roleLabel}色`) : ''
+  const editorLabel = `颜色编辑${roleTitle ? ` ${roleTitle}` : ''}`
+  const editor = open ? <div ref={popoverRef} className={`color-editor-popover ${resident ? 'resident' : 'transient'}`} role="dialog" aria-label={editorLabel} style={{ ...position, ...size }}>
+    <header className="color-editor-titlebar" onPointerDown={(event) => {
+      if (event.button !== 0 || (event.target as HTMLElement).closest('button')) return
+      dragRef.current = { pointerX: event.clientX, pointerY: event.clientY, left: position.left, top: position.top }
+      event.preventDefault()
+    }}><strong>颜色编辑{roleTitle ? ` ${roleTitle}` : ''}</strong><button type="button" className="icon-button" aria-label="关闭颜色编辑" onClick={() => { positionedRef.current = false; setOpen(false) }}><X size={14} /></button></header>
     <div className="color-editor-toolbar">
       <div className="color-editor-tabs" role="tablist" aria-label="颜色模式">
         {modeLabels.map((option) => <button key={option.value} type="button" role="tab" aria-selected={mode === option.value} className={mode === option.value ? 'selected' : ''} onClick={() => setMode(option.value)}>{option.label}</button>)}
@@ -89,17 +188,24 @@ export function ColorValueControl({ color, onChange, label, roleLabel, className
       <label className="color-editor-hex"><span>#</span><input aria-label={`${label} HEX`} value={hexText.replace(/^#/, '')} onChange={(event) => setHexText(`#${event.target.value}`)} onBlur={commitHex} onKeyDown={(event) => { if (event.key === 'Enter') { event.preventDefault(); commitHex() } }} /></label>
       <span className="color-editor-current-swatch" aria-label="当前颜色"><i style={{ background: cssColor(color) }} /></span>
     </div>
-    <div className="color-editor-fields">
-      {colorValueFields(mode).map((field) => {
+    <div className="color-editor-fields" style={{ '--color-field-count': fields.length } as React.CSSProperties}>
+      {fields.map((field) => {
         const gradient = colorGradient(mode, values, color, field)
         const background = field.key === 'a' ? `${gradient}, repeating-conic-gradient(#686d76 0 25%, #aeb3bc 0 50%) 50% / 12px 12px` : gradient
         return <label key={field.key} className="color-editor-field"><span className="color-editor-field-label">{field.label}</span><input aria-label={`${label} ${field.label}滑块`} className="color-editor-range" style={{ background }} type="range" min={field.min} max={field.max} step={field.step} value={values[field.key] ?? 0} onChange={(event) => updateValue(field.key, Number(event.target.value))} /><NumberInput aria-label={`${label} ${field.label}`} min={field.min} max={field.max} step={field.step} value={Math.round(values[field.key] ?? 0)} onValueChange={(value) => updateValue(field.key, value)} /></label>
       })}
     </div>
+    <PanelResizeHandles onResize={(event, direction) => {
+      if (event.button !== 0 || !popoverRef.current) return
+      const bounds = popoverRef.current.getBoundingClientRect()
+      resizeRef.current = { direction, pointerX: event.clientX, pointerY: event.clientY, left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height }
+      event.preventDefault()
+      event.stopPropagation()
+    }} />
   </div> : null
 
   return <>
-    <button ref={triggerRef} type="button" className={`color-value-trigger ${className}`} aria-label={`${label}${roleLabel ? ` ${roleLabel}` : ''}`} aria-expanded={open} onClick={() => { setHexText(rgbaHex(color)); setOpen((value) => !value) }}>
+    <button ref={triggerRef} type="button" className={`color-value-trigger ${className}`} aria-label={`${label}${roleLabel ? ` ${roleLabel}` : ''}`} aria-expanded={open} onClick={() => { setHexText(rgbaHex(color)); if (open) positionedRef.current = false; else { residentRef.current = false; setResident(false) }; setOpen((value) => !value) }}>
       <span className="color-value-swatch"><i style={{ background: `rgba(${color.r}, ${color.g}, ${color.b}, ${clampByte(color.a) / 255})` }} /></span>
       <strong>{rgbaHex(color)}</strong>
       {roleLabel && <small>{roleLabel}</small>}
diff --git a/src/renderer/src/components/ComponentLibrary.tsx b/src/renderer/src/components/ComponentLibrary.tsx
index 95cd4a7..8ff272f 100644
--- a/src/renderer/src/components/ComponentLibrary.tsx
+++ b/src/renderer/src/components/ComponentLibrary.tsx
@@ -3,6 +3,8 @@ import { Check, ChevronRight, Copy, Eye, EyeOff, FileText, FolderOpen, Info, Lay
 import type { RgbaColor } from '@shared/types'
 import { ColorPicker, type ColorPickerConfig } from './ColorPicker'
 import { ColorValueControl } from './ColorValueControl'
+import { DeleteIconButton } from './DeleteIconButton'
+import { ModalShell } from './ModalShell'
 import { NumberInput } from './NumberInput'
 import { TextAreaInput } from './TextAreaInput'
 import { ThemedSelect, type ThemedSelectGroup } from './ThemedSelect'
@@ -31,6 +33,7 @@ const categoryLabels: Record<ComponentCategory, string> = {
 export const COMPONENT_LIBRARY_ENTRIES: ComponentLibraryEntry[] = [
   { id: 'buttons', name: '按钮组', category: 'controls', description: '主要操作、次要操作和危险操作使用同一组尺寸与状态。', source: '.primary-button / .quiet-button / .danger-button', tags: ['操作', '状态'] },
   { id: 'icon-button', name: '图标按钮', category: 'controls', description: '工具栏和面板标题中的方形图标操作。', source: '.icon-button', tags: ['图标', '工具栏'] },
+  { id: 'delete-icon-button', name: '删除图标按钮', category: 'controls', description: '用于删除预设或列表项目的统一危险图标按钮，提供紧凑、常规和禁用状态。', source: 'DeleteIconButton', tags: ['删除', '危险', '图标'] },
   { id: 'context-menu', name: '上下文菜单', category: 'controls', description: '通过右键或更多操作打开的紧凑菜单，支持图标、禁用和危险操作状态。', source: '.context-menu / .context-menu-item', tags: ['右键', '菜单', '操作'] },
   { id: 'segmented', name: '分段选择', category: 'controls', description: '用于工具模式、视图模式和互斥选项。', source: '.segmented-control', tags: ['模式', '选中'] },
   { id: 'number-input', name: '数值输入', category: 'forms', description: '统一的数字输入、步进按钮和边界限制。', source: 'NumberInput', tags: ['数字', '步进'] },
@@ -43,7 +46,7 @@ export const COMPONENT_LIBRARY_ENTRIES: ComponentLibraryEntry[] = [
   { id: 'panel-header', name: '栏目标题', category: 'panels', description: '停靠栏目标题、拖动入口和右侧操作。', source: '.panel-header', tags: ['栏目', '停靠'] },
   { id: 'layer-row', name: '图层行', category: 'panels', description: '可见性、锁定、组图标、名称、混合模式和拖动状态。', source: 'LayersPanel', tags: ['图层', '拖动'] },
   { id: 'swatches', name: '颜色格', category: 'panels', description: '调色板中的选中、悬浮和多选状态。', source: '.swatch-grid / .swatch', tags: ['颜色', '多选'] },
-  { id: 'modal-shell', name: '弹窗框架', category: 'dialogs', description: '统一标题、内容、底部操作区和关闭行为。', source: '.modal / .modal-backdrop', tags: ['弹窗', '布局'] },
+  { id: 'modal-shell', name: '弹窗框架', category: 'dialogs', description: '统一标题、内容、底部操作、拖动、八向缩放和尺寸位置记忆。', source: 'ModalShell / .modal-backdrop', tags: ['弹窗', '布局', '缩放'] },
   { id: 'status', name: '状态提示', category: 'dialogs', description: '用于操作反馈、模式提示和不可用状态。', source: '.statusbar / .advanced-mode-notice', tags: ['提示', '反馈'] },
   { id: 'tooltip', name: '悬浮提示', category: 'dialogs', description: '用于描述等较长内容的自定义悬浮提示，自动避开视口边缘。', source: 'Tooltip', tags: ['提示', '悬浮', '描述'] },
   { id: 'tool-options', name: '工具属性栏', category: 'editor', description: '工具名称、参数、模式和撤销重做操作。', source: '.tool-options', tags: ['工具', '属性'] },
@@ -77,6 +80,10 @@ function IconButtonPreview() {
   return <div className="component-preview-row"><button className="icon-button" type="button" aria-label="复制"><Copy size={16} /></button><button className="icon-button active" type="button" aria-label="设置"><Settings2 size={16} /></button><button className="icon-button" type="button" aria-label="删除"><Trash2 size={16} /></button></div>
 }
 
+function DeleteIconButtonPreview() {
+  return <div className="component-preview-row"><DeleteIconButton aria-label="删除预设" /><DeleteIconButton aria-label="删除颜色预设" size="regular" /><DeleteIconButton aria-label="删除已禁用" disabled /></div>
+}
+
 function ContextMenuPreview() {
   const [open, setOpen] = useState(true)
   return <div className="component-context-menu-preview">
@@ -187,6 +194,7 @@ function DockPreview() {
 const previewRenderers: Record<string, () => ReactElement> = {
   buttons: ButtonsPreview,
   'icon-button': IconButtonPreview,
+  'delete-icon-button': DeleteIconButtonPreview,
   'context-menu': ContextMenuPreview,
   segmented: SegmentedPreview,
   'number-input': NumberInputPreview,
@@ -221,7 +229,7 @@ export function ComponentLibrary({ onClose }: { onClose: () => void }) {
   const Preview = previewRenderers[selectedEntry.id]
 
   return <div className="modal-backdrop component-library-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) onClose() }}>
-    <section className="component-library modal" role="dialog" aria-modal="true" aria-labelledby="component-library-title">
+    <ModalShell storageKey="component-library" defaultWidth={920} defaultHeight={680} fitContent={false} className="component-library" role="dialog" aria-modal="true" aria-labelledby="component-library-title">
       <header className="component-library-header"><div><span className="eyebrow">MOONSPRITE UI</span><h2 id="component-library-title">组件库</h2><p>可复用组件与交互状态</p></div><button className="icon-button" type="button" aria-label="关闭组件库" onClick={onClose}><X size={16} /></button></header>
       <div className="component-library-layout">
         <aside className="component-library-sidebar">
@@ -237,6 +245,6 @@ export function ComponentLibrary({ onClose }: { onClose: () => void }) {
         </main>
       </div>
       <footer className="component-library-footer"><span><FileText size={14} />{COMPONENT_LIBRARY_ENTRIES.length} 个已登记组件</span><span className="component-library-footer-note"><Palette size={14} />新建 UI 前先从这里选择</span><button className="primary-button" type="button" onClick={onClose}>完成</button></footer>
-    </section>
+    </ModalShell>
   </div>
 }
diff --git a/src/renderer/src/components/DeleteIconButton.test.tsx b/src/renderer/src/components/DeleteIconButton.test.tsx
new file mode 100644
index 0000000..9a895b4
--- /dev/null
+++ b/src/renderer/src/components/DeleteIconButton.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { COMPONENT_LIBRARY_ENTRIES } from './ComponentLibrary'
+import { DeleteIconButton } from './DeleteIconButton'
+
+describe('DeleteIconButton', () => {
+  it('provides unified compact, regular and disabled deletion states', () => {
+    const onClick = vi.fn()
+    const { rerender } = render(<DeleteIconButton aria-label="删除预设" onClick={onClick} />)
+    expect(screen.getByRole('button', { name: '删除预设' })).toHaveClass('delete-icon-button', 'compact')
+
+    rerender(<DeleteIconButton aria-label="删除预设" size="regular" disabled onClick={onClick} />)
+    expect(screen.getByRole('button', { name: '删除预设' })).toHaveClass('delete-icon-button', 'regular')
+    expect(screen.getByRole('button', { name: '删除预设' })).toBeDisabled()
+  })
+
+  it('is registered in the reusable component library', () => {
+    expect(COMPONENT_LIBRARY_ENTRIES.some((entry) => entry.id === 'delete-icon-button')).toBe(true)
+  })
+})
diff --git a/src/renderer/src/components/DeleteIconButton.tsx b/src/renderer/src/components/DeleteIconButton.tsx
new file mode 100644
index 0000000..d21390c
--- /dev/null
+++ b/src/renderer/src/components/DeleteIconButton.tsx
@@ -0,0 +1,15 @@
+import { Trash2 } from 'lucide-react'
+import type { ButtonHTMLAttributes } from 'react'
+
+export interface DeleteIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  size?: 'compact' | 'regular'
+}
+
+export function DeleteIconButton({ className = '', size = 'compact', title = '删除', ...props }: DeleteIconButtonProps) {
+  return <button
+    {...props}
+    type={props.type ?? 'button'}
+    className={`icon-button delete-icon-button ${size === 'regular' ? 'regular' : 'compact'} ${className}`.trim()}
+    title={title}
+  ><Trash2 size={size === 'regular' ? 15 : 13} /></button>
+}
diff --git a/src/renderer/src/components/HomeWorkspace.test.tsx b/src/renderer/src/components/HomeWorkspace.test.tsx
new file mode 100644
index 0000000..d1fd20e
--- /dev/null
+++ b/src/renderer/src/components/HomeWorkspace.test.tsx
@@ -0,0 +1,104 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { MoonSpriteApi } from '@shared/types'
+import { createDocument } from '@/core/document'
+import { getRecentProjects, recordRecentProject } from '@/core/home-history'
+import { encodeProject } from '@/core/project-format'
+import { HomeWorkspace } from './HomeWorkspace'
+
+const galleryProject = {
+  filePath: 'C:\\gallery\\slow.moonsprite',
+  fileName: 'slow.moonsprite',
+  modifiedAt: 1
+}
+
+afterEach(() => {
+  cleanup()
+  localStorage.clear()
+  vi.restoreAllMocks()
+})
+
+function installApi(overrides: Partial<MoonSpriteApi>): void {
+  window.moonSprite = {
+    ensureBuiltinExample: vi.fn(async () => null),
+    listGalleryProjects: vi.fn(async () => ({ directoryPath: 'C:\\gallery', projects: [galleryProject] })),
+    deleteGalleryProject: vi.fn(async () => undefined),
+    ...overrides
+  } as unknown as MoonSpriteApi
+}
+
+describe('HomeWorkspace', () => {
+  it('shows project rows before their previews finish decoding', async () => {
+    localStorage.setItem('moonsprite.home-section.v1', 'gallery')
+    installApi({ readBinary: vi.fn(() => new Promise<Uint8Array>(() => {})) })
+
+    render(<HomeWorkspace onNew={vi.fn()} onOpen={vi.fn()} onOpenProject={vi.fn(async () => true)} onRestoreRecovery={vi.fn(async () => true)} />)
+
+    expect(await screen.findByText('slow.moonsprite')).toBeInTheDocument()
+    expect(screen.queryByText('其他')).not.toBeInTheDocument()
+  })
+
+  it('limits progressive preview loading to three concurrent files', async () => {
+    localStorage.setItem('moonsprite.home-section.v1', 'gallery')
+    const galleryProjects = Array.from({ length: 5 }, (_, index) => ({ filePath: `C:\\gallery\\large-${index}.moonsprite`, fileName: `large-${index}.moonsprite`, modifiedAt: index + 10 }))
+    const readBinary = vi.fn(() => new Promise<Uint8Array>(() => {}))
+    installApi({
+      listGalleryProjects: vi.fn(async () => ({ directoryPath: 'C:\\gallery', projects: galleryProjects })),
+      readBinary
+    })
+
+    render(<HomeWorkspace onNew={vi.fn()} onOpen={vi.fn()} onOpenProject={vi.fn(async () => true)} onRestoreRecovery={vi.fn(async () => true)} />)
+
+    expect(await screen.findByText('large-4.moonsprite')).toBeInTheDocument()
+    await waitFor(() => expect(readBinary).toHaveBeenCalledTimes(3))
+  })
+
+  it('keeps an unreadable gallery file when opening fails', async () => {
+    localStorage.setItem('moonsprite.home-section.v1', 'gallery')
+    const deleteGalleryProject = vi.fn(async () => undefined)
+    const onOpenProject = vi.fn(async () => false)
+    installApi({ readBinary: vi.fn(async () => { throw new Error('broken preview') }), deleteGalleryProject })
+
+    render(<HomeWorkspace onNew={vi.fn()} onOpen={vi.fn()} onOpenProject={onOpenProject} onRestoreRecovery={vi.fn(async () => true)} />)
+    const openButton = await screen.findByTitle(/点击重新尝试打开/)
+    fireEvent.click(openButton)
+
+    await waitFor(() => expect(onOpenProject).toHaveBeenCalledWith(galleryProject.filePath, false))
+    expect(deleteGalleryProject).not.toHaveBeenCalled()
+  })
+
+  it('removes an unreadable recent record without deleting its file', async () => {
+    const filePath = 'C:\\art\\missing-home-test.moonsprite'
+    recordRecentProject(filePath)
+    const deleteGalleryProject = vi.fn(async () => undefined)
+    installApi({ readBinary: vi.fn(async () => { throw new Error('missing') }), deleteGalleryProject })
+
+    render(<HomeWorkspace onNew={vi.fn()} onOpen={vi.fn()} onOpenProject={vi.fn(async () => false)} onRestoreRecovery={vi.fn(async () => true)} />)
+    fireEvent.click(await screen.findByRole('button', { name: '从最近移除 missing-home-test.moonsprite' }))
+
+    expect(getRecentProjects()).toEqual([])
+    expect(deleteGalleryProject).not.toHaveBeenCalled()
+  })
+
+  it('reuses a decoded preview while its path and timestamp stay unchanged', async () => {
+    const cachedProject = { ...galleryProject, filePath: 'C:\\gallery\\cached-home-test.moonsprite', fileName: 'cached-home-test.moonsprite', modifiedAt: 73 }
+    const bytes = encodeProject(createDocument('cached preview', 3, 2, 'rgba'))
+    const readBinary = vi.fn(async () => bytes)
+    Object.defineProperty(URL, 'createObjectURL', { configurable: true, value: vi.fn(() => `blob:preview-${Math.random()}`) })
+    Object.defineProperty(URL, 'revokeObjectURL', { configurable: true, value: vi.fn() })
+    localStorage.setItem('moonsprite.home-section.v1', 'gallery')
+    installApi({
+      listGalleryProjects: vi.fn(async () => ({ directoryPath: 'C:\\gallery', projects: [cachedProject] })),
+      readBinary
+    })
+
+    render(<HomeWorkspace onNew={vi.fn()} onOpen={vi.fn()} onOpenProject={vi.fn(async () => true)} onRestoreRecovery={vi.fn(async () => true)} />)
+    const refresh = await screen.findByRole('button', { name: '刷新当前栏目' })
+    await waitFor(() => expect(readBinary).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(refresh).not.toBeDisabled())
+    fireEvent.click(refresh)
+
+    await waitFor(() => expect(screen.getByText('3 x 2 · RGBA')).toBeInTheDocument())
+    expect(readBinary).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/src/renderer/src/components/HomeWorkspace.tsx b/src/renderer/src/components/HomeWorkspace.tsx
index 81b4676..1b7c484 100644
--- a/src/renderer/src/components/HomeWorkspace.tsx
+++ b/src/renderer/src/components/HomeWorkspace.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'
-import { Eraser, FileImage, FolderOpen, GripVertical, Images, MoreHorizontal, Pin, Plus, RefreshCw, Trash2, TriangleAlert } from 'lucide-react'
+import { Eraser, FileImage, FolderOpen, GripVertical, Images, Pin, Plus, RefreshCw, Trash2, TriangleAlert, X } from 'lucide-react'
 import type { RecoveryRecord } from '@shared/types'
 import { APP_CHANNEL_LABEL } from '@/core/app-meta'
 import { readProjectGalleryMetadata } from '@/core/project-format'
@@ -24,11 +24,29 @@ interface HomeWorkspaceProps {
   onRestoreRecovery(id: string): Promise<boolean>
 }
 
-type HomeSection = 'recent' | 'gallery' | 'recovery' | 'other'
+type HomeSection = 'recent' | 'gallery' | 'recovery'
 const homeSectionStorageKey = 'moonsprite.home-section.v1'
+interface CachedProjectPreview {
+  bytes: Uint8Array
+  width: number
+  height: number
+  colorMode: ProjectCard['colorMode']
+}
+const projectPreviewCache = new Map<string, CachedProjectPreview>()
+const maxCachedProjectPreviews = 48
+const previewCacheKey = (record: RecentProject): string => `${record.filePath}\u0000${record.lastOpened}`
+const cacheProjectPreview = (key: string, preview: CachedProjectPreview): void => {
+  projectPreviewCache.delete(key)
+  projectPreviewCache.set(key, preview)
+  while (projectPreviewCache.size > maxCachedProjectPreviews) projectPreviewCache.delete(projectPreviewCache.keys().next().value!)
+}
+const createPreviewUrl = (bytes: Uint8Array): string => {
+  const buffer = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer
+  return URL.createObjectURL(new Blob([buffer], { type: 'image/png' }))
+}
 const loadHomeSection = (): HomeSection => {
   const stored = localStorage.getItem(homeSectionStorageKey)
-  return stored === 'gallery' || stored === 'recovery' || stored === 'other' ? stored : 'recent'
+  return stored === 'gallery' || stored === 'recovery' ? stored : 'recent'
 }
 
 const formatTime = (value: number): string => {
@@ -60,21 +78,23 @@ interface ProjectFileRowProps {
   onOpenInBackground(): void
   onPin(): void
   onDelete?(): void
+  onRemoveFromRecent?(): void
   onReorderStart(event: ReactPointerEvent<HTMLButtonElement>, filePath: string): void
   onReorderMove(event: ReactPointerEvent<HTMLButtonElement>): void
   onReorderEnd(event: ReactPointerEvent<HTMLButtonElement>): void
 }
 
-function ProjectFileRow({ project, reorderable, dragging, removePending, onOpen, onOpenInBackground, onPin, onDelete, onReorderStart, onReorderMove, onReorderEnd }: ProjectFileRowProps) {
+function ProjectFileRow({ project, reorderable, dragging, removePending, onOpen, onOpenInBackground, onPin, onDelete, onRemoveFromRecent, onReorderStart, onReorderMove, onReorderEnd }: ProjectFileRowProps) {
   const invalid = Boolean(project.error)
-  return <article className={`recent-file-row ${invalid ? 'invalid' : ''} ${project.pinned ? 'pinned' : ''} ${reorderable ? 'reorderable' : ''} ${onDelete ? 'deletable' : ''} ${dragging ? 'dragging' : ''} ${removePending ? 'remove-pending' : ''}`} data-recent-path={project.filePath}>
-    <button type="button" className="recent-file-open" onPointerDown={(event) => { if (event.button === 1) event.preventDefault() }} onClick={onOpen} onAuxClick={(event) => { if (event.button !== 1) return; event.preventDefault(); event.stopPropagation(); onOpenInBackground() }} title={invalid ? `无法读取：${project.error}。点击移除该项目。` : `打开 ${project.name}`}>
+  return <article className={`recent-file-row ${invalid ? 'invalid' : ''} ${project.pinned ? 'pinned' : ''} ${reorderable ? 'reorderable' : ''} ${onDelete ? 'deletable' : ''} ${onRemoveFromRecent ? 'removable' : ''} ${dragging ? 'dragging' : ''} ${removePending ? 'remove-pending' : ''}`} data-recent-path={project.filePath}>
+    <button type="button" className="recent-file-open" onPointerDown={(event) => { if (event.button === 1) event.preventDefault() }} onClick={onOpen} onAuxClick={(event) => { if (event.button !== 1) return; event.preventDefault(); event.stopPropagation(); onOpenInBackground() }} title={invalid ? `无法读取预览：${project.error}。点击重新尝试打开。` : `打开 ${project.name}`}>
       <span className="recent-file-preview">{project.previewUrl ? <img src={project.previewUrl} alt="" /> : invalid ? <TriangleAlert size={21} /> : <FileImage size={20} />}</span>
-      <span className="recent-file-copy"><strong>{project.name}</strong><small>{invalid ? '无法读取，点击后移除' : `${project.width ?? '-'} x ${project.height ?? '-'} · ${colorModeLabel(project.colorMode)}`}</small><span>{project.filePath}</span></span>
+      <span className="recent-file-copy"><strong>{project.name}</strong><small>{invalid ? '预览读取失败，点击重试打开' : project.width && project.height ? `${project.width} x ${project.height} · ${colorModeLabel(project.colorMode)}` : '正在读取预览'}</small><span>{project.filePath}</span></span>
       <time>{formatTime(project.lastOpened)}</time>
     </button>
     <button className="recent-file-pin" type="button" onClick={onPin} aria-label={project.pinned ? `取消置顶 ${project.name}` : `置顶 ${project.name}`} title={project.pinned ? '取消置顶' : '置顶'}><Pin size={14} /></button>
     {onDelete && <button className="recent-file-delete" type="button" onClick={onDelete} aria-label={`删除工程 ${project.name}`} title="删除工程"><Trash2 size={14} /></button>}
+    {onRemoveFromRecent && <button className="recent-file-remove" type="button" onClick={onRemoveFromRecent} aria-label={`从最近移除 ${project.name}`} title="从最近移除，不删除文件"><X size={15} /></button>}
     {reorderable && <button className="recent-file-reorder" type="button" onPointerDown={(event) => onReorderStart(event, project.filePath)} onPointerMove={onReorderMove} onPointerUp={onReorderEnd} onPointerCancel={onReorderEnd} aria-label={`调整 ${project.name} 的位置`} title="拖动调整位置"><GripVertical size={15} /></button>}
   </article>
 }
@@ -114,31 +134,40 @@ export function HomeWorkspace({ onNew, onOpen, onOpenProject, onRestoreRecovery
     objectUrls.current = []
   }
 
-  const readCards = async (records: RecentProject[]): Promise<ProjectCard[]> => Promise.all(records.map(async (record): Promise<ProjectCard> => {
+  const readCard = async (record: RecentProject): Promise<ProjectCard> => {
     try {
+      const cacheKey = previewCacheKey(record)
+      const cached = projectPreviewCache.get(cacheKey)
+      if (cached) {
+        projectPreviewCache.delete(cacheKey)
+        projectPreviewCache.set(cacheKey, cached)
+        return { ...record, name: record.fileName, previewUrl: createPreviewUrl(cached.bytes), width: cached.width, height: cached.height, colorMode: cached.colorMode }
+      }
       const bytes = await window.moonSprite.readBinary(record.filePath)
       if (/\.moonsprite$/i.test(record.filePath)) {
         const metadata = readProjectGalleryMetadata(bytes)
-        const buffer = metadata.preview.buffer.slice(metadata.preview.byteOffset, metadata.preview.byteOffset + metadata.preview.byteLength) as ArrayBuffer
-        const previewUrl = URL.createObjectURL(new Blob([buffer], { type: 'image/png' }))
+        const previewBytes = metadata.preview.slice()
+        cacheProjectPreview(cacheKey, { bytes: previewBytes, width: metadata.width, height: metadata.height, colorMode: metadata.colorMode })
+        const previewUrl = createPreviewUrl(previewBytes)
         return { ...record, name: record.fileName, previewUrl, width: metadata.width, height: metadata.height, colorMode: metadata.colorMode }
       }
       const document = await decodeDocumentFileAsync(bytes, record.filePath)
       const preview = await exportDocumentImage(document, 100, 'png-auto')
-      const buffer = preview.bytes.buffer.slice(preview.bytes.byteOffset, preview.bytes.byteOffset + preview.bytes.byteLength) as ArrayBuffer
-      const previewUrl = URL.createObjectURL(new Blob([buffer], { type: 'image/png' }))
+      const previewBytes = preview.bytes.slice()
+      cacheProjectPreview(cacheKey, { bytes: previewBytes, width: document.width, height: document.height, colorMode: document.colorMode })
+      const previewUrl = createPreviewUrl(previewBytes)
       return { ...record, name: record.fileName, previewUrl, width: document.width, height: document.height, colorMode: document.colorMode }
     } catch (error) {
       return { ...record, name: record.fileName, error: error instanceof Error ? error.message : '工程文件无法读取' }
     }
-  }))
+  }
 
   const loadSection = async (target: HomeSection): Promise<void> => {
     const generation = ++loadGeneration.current
     releaseObjectUrls()
     setProjects([])
     setLoadError('')
-    if (target === 'other' || target === 'recovery') { setLoading(false); return }
+    if (target === 'recovery') { setLoading(false); return }
     setLoading(true)
     try {
       let records: RecentProject[]
@@ -149,13 +178,30 @@ export function HomeWorkspace({ onNew, onOpen, onOpenProject, onRestoreRecovery
         records = listing.projects.map((project) => ({ filePath: project.filePath, fileName: project.fileName, name: project.fileName, lastOpened: project.modifiedAt, pinned: pins.has(project.filePath) }))
           .sort((left, right) => Number(right.pinned) - Number(left.pinned) || right.lastOpened - left.lastOpened)
       } else records = getRecentProjects()
-      const cards = await readCards(records)
-      if (generation !== loadGeneration.current) {
-        for (const card of cards) if (card.previewUrl) URL.revokeObjectURL(card.previewUrl)
-        return
+      if (generation !== loadGeneration.current) return
+      const initialCards = records.map((record): ProjectCard => ({ ...record, name: record.fileName }))
+      projectsRef.current = initialCards
+      setProjects(initialCards)
+      setLoading(false)
+      let nextIndex = 0
+      const loadNext = async (): Promise<void> => {
+        while (nextIndex < records.length) {
+          const index = nextIndex
+          nextIndex += 1
+          const card = await readCard(records[index])
+          if (generation !== loadGeneration.current) {
+            if (card.previewUrl) URL.revokeObjectURL(card.previewUrl)
+            return
+          }
+          if (card.previewUrl) objectUrls.current.push(card.previewUrl)
+          setProjects((items) => {
+            const next = items.map((item) => item.filePath === card.filePath ? card : item)
+            projectsRef.current = next
+            return next
+          })
+        }
       }
-      objectUrls.current = cards.flatMap((card) => card.previewUrl ? [card.previewUrl] : [])
-      setProjects(cards)
+      await Promise.all(Array.from({ length: Math.min(3, records.length) }, () => loadNext()))
     } catch (error) {
       if (generation === loadGeneration.current) setLoadError(error instanceof Error ? error.message : `无法读取${target === 'gallery' ? '画廊' : '最近文件'}`)
     } finally {
@@ -264,31 +310,18 @@ export function HomeWorkspace({ onNew, onOpen, onOpenProject, onRestoreRecovery
     }
   }
 
-  const discardUnreadableProject = async (project: ProjectCard, reason?: string): Promise<void> => {
-    const detail = reason ?? project.error ?? '工程文件不存在或已损坏。'
-    if (section === 'gallery') {
-      try {
-        const fileName = project.filePath.split(/[\\/]/).pop() ?? project.fileName
-        await window.moonSprite.deleteGalleryProject(fileName)
-        removeGalleryPin(project.filePath)
-        setMessage(`${project.name}：${detail}，已从画廊删除。`)
-      } catch (error) {
-        setMessage(`${project.name}：${detail}，无法删除画廊文件，已从当前列表移除。${error instanceof Error ? ` ${error.message}` : ''}`)
-      }
-    } else {
-      removeRecentProject(project.filePath)
-      setMessage(`${project.name}：${detail}，已从最近记录移除。`)
-    }
+  const removeFromRecent = (project: ProjectCard): void => {
+    removeRecentProject(project.filePath)
     removeProjectFromView(project.filePath)
+    setMessage(`${project.name}：已从最近记录移除，工程文件未删除。`)
   }
 
   const openProject = async (project: ProjectCard, keepHomeOpen = false): Promise<void> => {
-    if (project.error) {
-      await discardUnreadableProject(project)
-      return
-    }
     const opened = await onOpenProject(project.filePath, keepHomeOpen)
-    if (!opened) await discardUnreadableProject(project, '打开时无法读取工程文件。')
+    if (opened) return
+    const error = '打开时无法读取工程文件，原文件仍保留。'
+    setProjects((items) => items.map((item) => item.filePath === project.filePath ? { ...item, error } : item))
+    setMessage(`${project.name}：${error}`)
   }
 
   const startRecentReorder = (event: ReactPointerEvent<HTMLButtonElement>, filePath: string): void => {
@@ -357,8 +390,6 @@ export function HomeWorkspace({ onNew, onOpen, onOpenProject, onRestoreRecovery
     ? { icon: <Images size={28} />, title: '画廊中没有工程', detail: '工程文件保存在 MoonSprite 根目录的 gallery 文件夹中。' }
     : section === 'recovery'
       ? { icon: <RefreshCw size={28} />, title: '没有待恢复的工程', detail: '非正常关闭的工程会出现在这里。' }
-      : section === 'other'
-      ? { icon: <MoreHorizontal size={28} />, title: '其他栏目', detail: '这个栏目暂时留空。' }
       : { icon: <FileImage size={28} />, title: '没有最近文件', detail: '打开或保存一个工程后，它会显示在这里。' }
 
   return <section className="aseprite-home" aria-label="MoonSprite 启动页">
@@ -375,17 +406,16 @@ export function HomeWorkspace({ onNew, onOpen, onOpenProject, onRestoreRecovery
           <button className="start-action quiet-button" type="button" onClick={onOpen}><FolderOpen size={20} /><span><strong>打开精灵</strong><small>打开工程或常用图片</small></span></button>
           <div className="start-action-note"><FileImage size={15} /><span>支持：MoonSprite、Aseprite、PNG、JPEG、WebP、BMP、GIF</span></div>
         </aside>
-        <section className="recent-files-panel" aria-label={section === 'recent' ? '最近文件' : section === 'gallery' ? '画廊' : section === 'recovery' ? '恢复' : '其他栏目'}>
+        <section className="recent-files-panel" aria-label={section === 'recent' ? '最近文件' : section === 'gallery' ? '画廊' : '恢复'}>
           <header className="recent-files-header">
             <div className="home-section-tabs" role="tablist" aria-label="首页栏目">
               <button role="tab" aria-selected={section === 'recent'} className={section === 'recent' ? 'selected' : ''} onClick={() => selectSection('recent')}>最近</button>
               <button role="tab" aria-selected={section === 'gallery'} className={section === 'gallery' ? 'selected' : ''} onClick={() => selectSection('gallery')}>画廊</button>
               {recoveryRecords.length > 0 && <button role="tab" aria-selected={section === 'recovery'} className={section === 'recovery' ? 'selected' : ''} onClick={() => selectSection('recovery')}>恢复<span className="recovery-count">{recoveryRecords.length}</span></button>}
-              <button role="tab" aria-selected={section === 'other'} className={section === 'other' ? 'selected' : ''} onClick={() => selectSection('other')}>其他</button>
             </div>
             <div className="recent-file-tools">
               {section === 'gallery' && <button className="icon-button" type="button" onClick={() => void window.moonSprite.openGalleryFolder()} aria-label="打开画廊文件夹" title={galleryDirectory || '打开画廊文件夹'}><FolderOpen size={15} /></button>}
-              <button className="icon-button" type="button" onClick={() => void loadSection(section)} disabled={loading || section === 'other' || section === 'recovery'} aria-label="刷新当前栏目" title="刷新"><RefreshCw size={15} /></button>
+              <button className="icon-button" type="button" onClick={() => void loadSection(section)} disabled={loading || section === 'recovery'} aria-label="刷新当前栏目" title="刷新"><RefreshCw size={15} /></button>
               {section === 'recent' && <button className="icon-button" type="button" onClick={clearRecent} disabled={!projects.some((project) => !project.pinned)} aria-label="清除未置顶记录" title="清除未置顶记录"><Eraser size={15} /></button>}
             </div>
           </header>
@@ -394,7 +424,7 @@ export function HomeWorkspace({ onNew, onOpen, onOpenProject, onRestoreRecovery
             {!loading && loadError && <div className="start-screen-state error"><TriangleAlert size={22} /><strong>无法读取栏目</strong><span>{loadError}</span><button className="quiet-button" type="button" onClick={() => void loadSection(section)}>重试</button></div>}
             {!loading && !loadError && ((section !== 'recovery' && projects.length === 0) || (section === 'recovery' && recoveryRecords.length === 0)) && <div className="start-screen-state">{emptyState.icon}<strong>{emptyState.title}</strong><span>{emptyState.detail}</span></div>}
             {!loading && !loadError && section === 'recovery' && recoveryRecords.map((record) => <RecoveryFileRow key={record.id} record={record} onRestore={() => void onRestoreRecovery(record.id)} onDiscard={() => void discardRecovery(record.id)} />)}
-            {!loading && !loadError && section !== 'recovery' && projects.map((project) => <ProjectFileRow key={project.filePath} project={project} reorderable={section === 'recent'} dragging={draggingProjectPath === project.filePath} removePending={removePendingProjectPath === project.filePath} onOpen={() => void openProject(project)} onOpenInBackground={() => void openProject(project, true)} onPin={() => pinProject(project.filePath)} onDelete={section === 'gallery' ? () => void deleteGalleryProject(project) : undefined} onReorderStart={startRecentReorder} onReorderMove={moveRecentReorder} onReorderEnd={endRecentReorder} />)}
+            {!loading && !loadError && section !== 'recovery' && projects.map((project) => <ProjectFileRow key={project.filePath} project={project} reorderable={section === 'recent'} dragging={draggingProjectPath === project.filePath} removePending={removePendingProjectPath === project.filePath} onOpen={() => void openProject(project)} onOpenInBackground={() => void openProject(project, true)} onPin={() => pinProject(project.filePath)} onDelete={section === 'gallery' ? () => void deleteGalleryProject(project) : undefined} onRemoveFromRecent={section === 'recent' && project.error ? () => removeFromRecent(project) : undefined} onReorderStart={startRecentReorder} onReorderMove={moveRecentReorder} onReorderEnd={endRecentReorder} />)}
           </div>
         </section>
       </div>
diff --git a/src/renderer/src/components/ImageResizeDialog.tsx b/src/renderer/src/components/ImageResizeDialog.tsx
index b480396..7c35942 100644
--- a/src/renderer/src/components/ImageResizeDialog.tsx
+++ b/src/renderer/src/components/ImageResizeDialog.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, type FormEvent } from 'react'
 import { Lock, LockOpen, X } from 'lucide-react'
 import type { ImageResizeInterpolation } from '@shared/types'
+import { ModalShell } from './ModalShell'
 import { NumberInput } from './NumberInput'
 
 export function ImageResizeDialog({ open, currentWidth, currentHeight, onClose, onResize }: {
@@ -55,7 +56,7 @@ export function ImageResizeDialog({ open, currentWidth, currentHeight, onClose,
   }
 
   return <div className="modal-backdrop" role="presentation">
-    <form className="modal image-resize-modal" onSubmit={submit} aria-label="调整图像尺寸">
+    <ModalShell as="form" storageKey="image-resize-v3" placement="right" defaultWidth={450} defaultHeight={500} minWidth={400} minHeight={430} maxWidth={600} maxHeight={720} className="image-resize-modal" onSubmit={submit} aria-label="调整图像尺寸">
       <header>
         <div><span className="eyebrow">IMAGE SIZE</span><h2>调整图像尺寸</h2></div>
         <button type="button" className="icon-button" aria-label="关闭" onClick={onClose}><X size={16} /></button>
@@ -80,6 +81,6 @@ export function ImageResizeDialog({ open, currentWidth, currentHeight, onClose,
         <label className="image-resize-interpolation"><span>插值算法</span><select value={interpolation} onChange={(event) => setInterpolation(event.target.value as ImageResizeInterpolation)}><option value="nearest">最近邻（像素）</option><option value="smooth">平滑（双线性）</option></select></label>
       </div>
       <footer><button type="button" className="quiet-button" onClick={onClose}>取消</button><button className="primary-button" type="submit">完成</button></footer>
-    </form>
+    </ModalShell>
   </div>
 }
diff --git a/src/renderer/src/components/ModalShell.test.tsx b/src/renderer/src/components/ModalShell.test.tsx
new file mode 100644
index 0000000..b38b062
--- /dev/null
+++ b/src/renderer/src/components/ModalShell.test.tsx
@@ -0,0 +1,53 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { ModalShell } from './ModalShell'
+
+beforeEach(() => localStorage.clear())
+afterEach(cleanup)
+
+describe('ModalShell', () => {
+  it('restores the saved bounds and exposes eight resize directions', async () => {
+    localStorage.setItem('moonsprite.modal.test', JSON.stringify({
+      x: 40,
+      y: 50,
+      width: 500,
+      height: 300,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight
+    }))
+
+    render(<ModalShell storageKey="test" role="dialog"><header>测试弹窗</header></ModalShell>)
+    const dialog = screen.getByRole('dialog')
+
+    expect(dialog).toHaveStyle({ left: '40px', top: '50px', width: '500px', height: '300px' })
+    expect(dialog).toHaveStyle({ overflow: 'hidden' })
+    await waitFor(() => expect(document.querySelectorAll('.floating-resize-portal .floating-resize-handle')).toHaveLength(8))
+  })
+
+  it('clamps restored bounds to the modal minimum size', () => {
+    localStorage.setItem('moonsprite.modal.small', JSON.stringify({
+      x: 20,
+      y: 20,
+      width: 120,
+      height: 80,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight
+    }))
+
+    render(<ModalShell storageKey="small" role="dialog"><header>小弹窗</header></ModalShell>)
+
+    expect(screen.getByRole('dialog')).toHaveStyle({ width: '300px', height: '220px' })
+  })
+
+  it('places right-side dialogs midway between the stage center and right edge', () => {
+    const stage = document.createElement('div')
+    stage.className = 'stage-wrap'
+    stage.getBoundingClientRect = () => new DOMRect(100, 50, 800, 600)
+    document.body.appendChild(stage)
+
+    render(<ModalShell storageKey="right" placement="right" defaultWidth={400} defaultHeight={300} role="dialog"><header>右侧弹窗</header></ModalShell>)
+
+    expect(screen.getByRole('dialog')).toHaveStyle({ left: '500px' })
+    stage.remove()
+  })
+})
diff --git a/src/renderer/src/components/ModalShell.tsx b/src/renderer/src/components/ModalShell.tsx
new file mode 100644
index 0000000..8b6cb74
--- /dev/null
+++ b/src/renderer/src/components/ModalShell.tsx
@@ -0,0 +1,89 @@
+import { createElement, useMemo, type FormEventHandler, type HTMLAttributes, type ReactElement, type ReactNode } from 'react'
+import { PortalResizeHandles, useFloatingPanel } from './floating-panel'
+
+type ModalPlacement = 'center' | 'right'
+
+interface ModalShellProps extends Omit<HTMLAttributes<HTMLElement>, 'onSubmit'> {
+  as?: 'section' | 'form'
+  children: ReactNode
+  className?: string
+  defaultHeight?: number
+  defaultWidth?: number
+  fitContent?: boolean
+  minHeight?: number
+  minWidth?: number
+  maxHeight?: number
+  maxWidth?: number
+  onSubmit?: FormEventHandler<HTMLFormElement>
+  placement?: ModalPlacement
+  storageKey: string
+}
+
+function initialModalPosition(width: number, height: number, placement: ModalPlacement, fitContent: boolean) {
+  const margin = 12
+  const safeWidth = Math.min(width, window.innerWidth - margin * 2)
+  const safeHeight = Math.min(height, window.innerHeight - margin * 2)
+  const stage = placement === 'right' ? document.querySelector<HTMLElement>('.stage-wrap')?.getBoundingClientRect() : null
+  const targetCenterX = stage && stage.width > 0 ? stage.left + stage.width * 0.75 : window.innerWidth * 0.75
+  const x = placement === 'right'
+    ? Math.max(margin, Math.min(window.innerWidth - safeWidth - margin, Math.round(targetCenterX - safeWidth / 2)))
+    : Math.max(margin, Math.round((window.innerWidth - safeWidth) / 2))
+  return {
+    x,
+    y: Math.max(margin, Math.round((window.innerHeight - safeHeight) / 2)),
+    width: safeWidth,
+    height: fitContent ? undefined : safeHeight
+  }
+}
+
+export function ModalShell({
+  as = 'section',
+  children,
+  className = '',
+  defaultHeight = 360,
+  defaultWidth = 420,
+  fitContent = true,
+  minHeight = 220,
+  minWidth = 300,
+  maxHeight = 760,
+  maxWidth = 820,
+  onPointerDown,
+  placement = 'center',
+  storageKey,
+  ...props
+}: ModalShellProps): ReactElement {
+  const layoutMinWidth = className.includes('settings-modal') ? Math.max(minWidth, 620)
+    : className.includes('component-library') ? Math.max(minWidth, 700)
+      : className.includes('outline-modal') ? Math.max(minWidth, 500)
+        : minWidth
+  const layoutMinHeight = className.includes('settings-modal') ? Math.max(minHeight, 440)
+    : className.includes('component-library') ? Math.max(minHeight, 500)
+      : className.includes('outline-modal') ? Math.max(minHeight, 400)
+        : minHeight
+  const initialPosition = useMemo(
+    () => initialModalPosition(defaultWidth, defaultHeight, placement, fitContent),
+    [defaultHeight, defaultWidth, fitContent, placement]
+  )
+  const floating = useFloatingPanel(
+    initialPosition,
+    placement === 'right',
+    false,
+    `moonsprite.modal.${storageKey}`,
+    false,
+    undefined,
+    false,
+    { minWidth: layoutMinWidth, minHeight: layoutMinHeight, maxWidth, maxHeight }
+  )
+
+  return createElement(as, {
+    ...props,
+    ref: floating.ref,
+    className: `modal resizable-modal ${placement === 'right' ? 'right-modal' : ''} ${className}`.trim(),
+    style: { ...floating.style, minWidth: layoutMinWidth, minHeight: layoutMinHeight, maxWidth: `min(${maxWidth}px, calc(100vw - 12px))`, maxHeight: `min(${maxHeight}px, calc(100vh - 12px))`, overflow: 'hidden' },
+    onPointerDown: (event: React.PointerEvent<HTMLElement>) => {
+      floating.bringToFront()
+      if ((event.target as HTMLElement).closest('header')) floating.startDrag(event)
+      onPointerDown?.(event)
+    }
+  }, children, createElement(PortalResizeHandles, { targetRef: floating.ref, position: floating.style, onResize: floating.startResize }))
+}
diff --git a/src/renderer/src/components/NewDocumentDialog.tsx b/src/renderer/src/components/NewDocumentDialog.tsx
index dfd9948..f1d971a 100644
--- a/src/renderer/src/components/NewDocumentDialog.tsx
+++ b/src/renderer/src/components/NewDocumentDialog.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { X } from 'lucide-react'
 import type { ColorMode } from '@shared/types'
 import { DEFAULT_DOCUMENT_SIZE_PRESETS, type DocumentSizePreset } from '@/core/file-preferences'
+import { ModalShell } from './ModalShell'
 import { NumberInput } from './NumberInput'
 
 export function getWindowsFileNameError(value: string): string | null {
@@ -48,7 +49,7 @@ export function NewDocumentDialog({ open, presets = DEFAULT_DOCUMENT_SIZE_PRESET
     onClose()
   }
   return <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) onClose() }}>
-    <form className="modal" onSubmit={submit} aria-label="新建画布">
+    <ModalShell as="form" storageKey="new-document" defaultWidth={400} defaultHeight={520} onSubmit={submit} aria-label="新建画布">
       <header><div><span className="eyebrow">NEW DOCUMENT</span><h2>新建画布</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={onClose}><X size={16} /></button></header>
       <div className="modal-body"><label>名称<input autoFocus value={name} aria-invalid={Boolean(nameError)} onChange={(event) => { setName(event.target.value); setNameError(getWindowsFileNameError(event.target.value)) }} /></label>{nameError && <p className="field-error" role="alert">{nameError}</p>}
         <div className="form-grid">
@@ -63,6 +64,6 @@ export function NewDocumentDialog({ open, presets = DEFAULT_DOCUMENT_SIZE_PRESET
         <p className="modal-note">画布尺寸没有预设上限。创建前会根据当前设备资源进行安全检查。</p>
       </div>
       <footer><button type="button" className="quiet-button" onClick={onClose}>取消</button><button className="primary-button" type="submit">创建画布</button></footer>
-    </form>
+    </ModalShell>
   </div>
 }
diff --git a/src/renderer/src/components/NumberInput.test.tsx b/src/renderer/src/components/NumberInput.test.tsx
index 2774c11..946d1b6 100644
--- a/src/renderer/src/components/NumberInput.test.tsx
+++ b/src/renderer/src/components/NumberInput.test.tsx
@@ -1,4 +1,5 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { useState } from 'react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { NumberInput } from './NumberInput'
 
@@ -23,4 +24,17 @@ describe('NumberInput', () => {
     expect(input).toHaveValue('7')
     expect(onValueChange).not.toHaveBeenCalled()
   })
+
+  it('submits the evaluated value after the controlled state is updated', async () => {
+    const submitted: number[] = []
+    const Form = () => {
+      const [value, setValue] = useState(4)
+      return <form onSubmit={(event) => { event.preventDefault(); submitted.push(value) }}><NumberInput aria-label="尺寸" value={value} onValueChange={setValue} /></form>
+    }
+    render(<Form />)
+    const input = screen.getByRole('spinbutton', { name: '尺寸' })
+    fireEvent.change(input, { target: { value: '8 * 2' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    await waitFor(() => expect(submitted).toEqual([16]))
+  })
 })
diff --git a/src/renderer/src/components/NumberInput.tsx b/src/renderer/src/components/NumberInput.tsx
index d790cbb..3b3ddbf 100644
--- a/src/renderer/src/components/NumberInput.tsx
+++ b/src/renderer/src/components/NumberInput.tsx
@@ -1,5 +1,5 @@
 import { ChevronDown, ChevronUp } from 'lucide-react'
-import { useEffect, useState, type CSSProperties, type InputHTMLAttributes } from 'react'
+import { useLayoutEffect, useState, type CSSProperties, type InputHTMLAttributes } from 'react'
 import { evaluateNumericExpression } from '@/core/numeric-expression'
 
 interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'min' | 'max' | 'step'> {
@@ -13,7 +13,7 @@ interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
 
 export function NumberInput({ value, onValueChange, min, max, step = 1, suffix, className = '', onFocus, onKeyDown, ...inputProps }: NumberInputProps) {
   const [draft, setDraft] = useState(String(value))
-  useEffect(() => setDraft(String(value)), [value])
+  useLayoutEffect(() => setDraft(String(value)), [value])
   const normalize = (next: number): number => {
     if (!Number.isFinite(next)) return typeof value === 'number' ? value : min ?? 0
     return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, next))
@@ -30,12 +30,12 @@ export function NumberInput({ value, onValueChange, min, max, step = 1, suffix,
 
   const control = <span className={`number-input ${suffix ? 'has-suffix' : ''} ${className}`.trim()}>
     <span className="number-input-editor" style={suffix ? { '--number-input-value-chars': Math.max(1, draft.length) } as CSSProperties : undefined}>
-      <input {...inputProps} type="text" inputMode="decimal" role="spinbutton" aria-valuemin={min} aria-valuemax={max} aria-valuenow={typeof value === 'number' ? value : undefined} value={draft} style={inputProps.style} onFocus={onFocus} onChange={(event) => setDraft(event.target.value)} onBlur={commit} onKeyDown={(event) => { onKeyDown?.(event); if (event.defaultPrevented || event.key !== 'Enter') return; event.preventDefault(); commit(); if (event.currentTarget.form) event.currentTarget.form.requestSubmit(); else event.currentTarget.blur() }} />
+      <input {...inputProps} type="text" inputMode="decimal" role="spinbutton" aria-valuemin={min} aria-valuemax={max} aria-valuenow={typeof value === 'number' ? value : undefined} value={draft} style={inputProps.style} onFocus={onFocus} onChange={(event) => setDraft(event.target.value)} onBlur={commit} onKeyDown={(event) => { onKeyDown?.(event); if (event.defaultPrevented || event.key !== 'Enter') return; event.preventDefault(); const form = event.currentTarget.form; commit(); if (form) window.queueMicrotask(() => form.requestSubmit()); else event.currentTarget.blur() }} />
       {suffix && <span className="number-input-suffix" aria-hidden="true">{suffix}</span>}
     </span>
     <span className="number-input-stepper">
-      <button type="button" tabIndex={-1} aria-label="增加数值" onClick={() => adjust(step)}><ChevronUp size={10} /></button>
-      <button type="button" tabIndex={-1} aria-label="减少数值" onClick={() => adjust(-step)}><ChevronDown size={10} /></button>
+      <button type="button" tabIndex={-1} aria-label="增加数值" disabled={inputProps.disabled} onClick={() => adjust(step)}><ChevronUp size={10} /></button>
+      <button type="button" tabIndex={-1} aria-label="减少数值" disabled={inputProps.disabled} onClick={() => adjust(-step)}><ChevronDown size={10} /></button>
     </span>
   </span>
   return control
diff --git a/src/renderer/src/components/OutlineDialog.test.tsx b/src/renderer/src/components/OutlineDialog.test.tsx
new file mode 100644
index 0000000..9119784
--- /dev/null
+++ b/src/renderer/src/components/OutlineDialog.test.tsx
@@ -0,0 +1,48 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createDocument, getActiveLayer, readLayerColorAt, writeLayerColor } from '@/core/document'
+import { useWorkspace } from '@/store/workspace'
+import { OutlineDialog } from './OutlineDialog'
+
+beforeEach(() => useWorkspace.setState({ sessions: [], activeId: null, message: null, dialog: null }))
+afterEach(cleanup)
+
+describe('OutlineDialog', () => {
+  it('confirms once and closes when Enter is pressed in the width input', async () => {
+    const document = createDocument('outline enter', 3, 3, 'rgba')
+    const layer = getActiveLayer(document)
+    writeLayerColor(document, layer, 4, { r: 255, g: 255, b: 255, a: 255 })
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().setPrimaryColor({ r: 255, g: 0, b: 0, a: 255 })
+    useWorkspace.getState().setSelection({ x: 1, y: 1, width: 1, height: 1 })
+    const onClose = vi.fn()
+    const session = useWorkspace.getState().sessions[0]
+    render(<OutlineDialog open session={session} onClose={onClose} />)
+
+    const widthInput = screen.getByRole('spinbutton')
+    fireEvent.change(widthInput, { target: { value: '2' } })
+    fireEvent.keyDown(widthInput, { key: 'Enter' })
+
+    await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1))
+    expect(session.outlinePreview).toBeNull()
+    expect(readLayerColorAt(document, layer, 1, 0)).toEqual({ r: 255, g: 0, b: 0, a: 255 })
+    expect(session.selection).toEqual({ x: 1, y: 1, width: 1, height: 1 })
+    expect(session.history.canUndo).toBe(true)
+    expect(document.outlineSettings?.thickness).toBe(2)
+  })
+
+  it('owns Enter while the dialog is open even when focus remains on the canvas', async () => {
+    const document = createDocument('outline canvas enter', 3, 3, 'rgba')
+    const layer = getActiveLayer(document)
+    writeLayerColor(document, layer, 4, { r: 255, g: 255, b: 255, a: 255 })
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().setSelection({ x: 1, y: 1, width: 1, height: 1 })
+    const onClose = vi.fn()
+    render(<OutlineDialog open session={useWorkspace.getState().sessions[0]} onClose={onClose} />)
+
+    fireEvent.keyDown(window, { key: 'Enter' })
+
+    await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1))
+    expect(useWorkspace.getState().sessions[0].selection).toEqual({ x: 1, y: 1, width: 1, height: 1 })
+  })
+})
diff --git a/src/renderer/src/components/OutlineDialog.tsx b/src/renderer/src/components/OutlineDialog.tsx
index a752656..fb0ead0 100644
--- a/src/renderer/src/components/OutlineDialog.tsx
+++ b/src/renderer/src/components/OutlineDialog.tsx
@@ -2,7 +2,9 @@ import { useEffect, useState } from 'react'
 import { Eye, X } from 'lucide-react'
 import type { OutlineDirection, OutlineDirections, OutlineKernel, OutlinePosition, RgbaColor } from '@shared/types'
 import { ColorPicker } from '@/components/ColorPicker'
+import { ModalShell } from '@/components/ModalShell'
 import { NumberInput } from '@/components/NumberInput'
+import { defaultOutlineSettings, normalizeOutlineSettings } from '@/core/outline-settings'
 import { useWorkspace, type DocumentSession } from '@/store/workspace'
 
 const directionGrid: Array<OutlineDirection | 'center'> = ['nw', 'n', 'ne', 'w', 'center', 'e', 'sw', 's', 'se']
@@ -15,6 +17,10 @@ const kernelDirections = (kernel: OutlineKernel): OutlineDirections => {
   if (kernel === 'vertical') for (const direction of ['nw', 'w', 'sw', 'ne', 'e', 'se'] as OutlineDirection[]) directions[direction] = false
   return directions
 }
+const matchesKernelDirections = (kernel: OutlineKernel, directions: OutlineDirections): boolean => {
+  const preset = kernelDirections(kernel)
+  return (Object.keys(preset) as OutlineDirection[]).every((direction) => preset[direction] === directions[direction])
+}
 
 const quickShapes: Array<{ id: OutlineKernel; label: string }> = [
   { id: 'round', label: '圆形' },
@@ -50,21 +56,21 @@ export function OutlineDialog({ open, session, onClose }: { open: boolean; sessi
       setOutlinePreview(null)
       return
     }
-    setColor({ ...session.primaryColor })
-    setThickness(1)
-    setPosition('outside')
-    setKernel('round')
-    setActiveQuickShape('round')
-    setEdgeDirections(kernelDirections('round'))
-    setPreviewEnabled(true)
-  }, [open, session.primaryColor.r, session.primaryColor.g, session.primaryColor.b, session.primaryColor.a, setOutlinePreview])
+    const settings = normalizeOutlineSettings(session.document.outlineSettings, session.primaryColor) ?? defaultOutlineSettings(session.primaryColor)
+    setColor({ ...settings.color })
+    setThickness(settings.thickness)
+    setPosition(settings.position)
+    setKernel(settings.kernel)
+    setActiveQuickShape(matchesKernelDirections(settings.kernel, settings.directions) ? settings.kernel : null)
+    setEdgeDirections({ ...settings.directions })
+    setPreviewEnabled(settings.previewEnabled)
+  }, [open, session.document.id, session.primaryColor.r, session.primaryColor.g, session.primaryColor.b, session.primaryColor.a, setOutlinePreview])
 
   useEffect(() => {
     if (open && previewEnabled) setOutlinePreview({ color, thickness, position, directions: edgeDirections, kernel })
     else setOutlinePreview(null)
   }, [open, previewEnabled, color, thickness, position, edgeDirections, kernel, setOutlinePreview])
 
-  if (!open) return null
   const close = (): void => { setOutlinePreview(null); onClose() }
   const applyQuickShape = (nextKernel: OutlineKernel): void => {
     setKernel(nextKernel)
@@ -79,11 +85,32 @@ export function OutlineDialog({ open, session, onClose }: { open: boolean; sessi
     setEdgeDirections((current) => ({ ...current, [direction]: !current[direction] }))
   }
   const submit = (): void => {
-    if (outlineActiveSelection(color, thickness, position, edgeDirections, kernel)) close()
+    if (outlineActiveSelection(color, thickness, position, edgeDirections, kernel, previewEnabled)) close()
   }
 
+  useEffect(() => {
+    if (!open) return
+    const keydown = (event: KeyboardEvent): void => {
+      if (event.key !== 'Enter' || event.isComposing || (event.target as HTMLElement | null)?.tagName === 'TEXTAREA') return
+      if ((event.target as Element | null)?.closest?.('.outline-modal')) return
+      event.preventDefault()
+      event.stopPropagation()
+      submit()
+    }
+    window.addEventListener('keydown', keydown)
+    return () => window.removeEventListener('keydown', keydown)
+  }, [open, color, thickness, position, edgeDirections, kernel, previewEnabled])
+
+  if (!open) return null
+
   return <div className="modal-backdrop" role="presentation">
-    <form className="modal outline-modal" onSubmit={(event) => { event.preventDefault(); submit() }}>
+    <ModalShell as="form" storageKey="outline" defaultWidth={560} defaultHeight={540} className="outline-modal" onSubmit={(event) => { event.preventDefault(); submit() }} onKeyDown={(event) => {
+      if (event.key !== 'Enter' || event.nativeEvent.isComposing || (event.target as HTMLElement).tagName === 'TEXTAREA') return
+      event.stopPropagation()
+      if (event.defaultPrevented) return
+      event.preventDefault()
+      submit()
+    }}>
       <header><div><span className="eyebrow">OUTLINE</span><h2>描边</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={close}><X size={16} /></button></header>
       <div className="modal-body outline-modal-body">
         <section className="outline-color-section"><span className="outline-section-label">描边颜色</span><ColorPicker color={color} onChange={setColor} compact label="描边颜色" /></section>
@@ -101,6 +128,6 @@ export function OutlineDialog({ open, session, onClose }: { open: boolean; sessi
         <label className="outline-preview-toggle"><span className="outline-preview-label"><Eye size={15} />实时预览</span><input type="checkbox" checked={previewEnabled} onChange={(event) => setPreviewEnabled(event.target.checked)} /><span className="toggle-track" aria-hidden="true"><i /></span></label>
       </div>
       <footer><button type="button" className="quiet-button" onClick={close}>取消</button><button type="submit" className="primary-button">应用描边</button></footer>
-    </form>
+    </ModalShell>
   </div>
 }
diff --git a/src/renderer/src/components/ThemedSelect.tsx b/src/renderer/src/components/ThemedSelect.tsx
index 25a0259..390b447 100644
--- a/src/renderer/src/components/ThemedSelect.tsx
+++ b/src/renderer/src/components/ThemedSelect.tsx
@@ -4,14 +4,15 @@ import { Check, ChevronDown } from 'lucide-react'
 
 export interface ThemedSelectGroup<T extends string> {
   label: string
-  options: Array<{ value: T; label: string }>
+  options: Array<{ value: T; label: string; description?: string }>
 }
 
-export function ThemedSelect<T extends string>({ value, groups, label, onChange }: {
+export function ThemedSelect<T extends string>({ value, groups, label, onChange, disabled = false }: {
   value: T
   groups: Array<ThemedSelectGroup<T>>
   label: string
   onChange: (value: T) => void
+  disabled?: boolean
 }) {
   const [open, setOpen] = useState(false)
   const [position, setPosition] = useState({ left: 8, top: 8, width: 220 })
@@ -59,13 +60,13 @@ export function ThemedSelect<T extends string>({ value, groups, label, onChange
   }
 
   return <span className="themed-select">
-    <button ref={triggerRef} type="button" className="themed-select-trigger" aria-label={label} aria-haspopup="listbox" aria-expanded={open} onClick={() => setOpen((current) => !current)} onKeyDown={(event) => {
+    <button ref={triggerRef} type="button" className="themed-select-trigger" aria-label={label} aria-haspopup="listbox" aria-expanded={open} disabled={disabled} onClick={() => setOpen((current) => !current)} onKeyDown={(event) => {
       if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
         event.preventDefault()
         moveSelection(event.key === 'ArrowDown' ? 1 : -1)
       }
       if (event.key === 'Escape') setOpen(false)
     }}><span>{selected?.label ?? value}</span><ChevronDown size={14} /></button>
-    {open && createPortal(<div ref={menuRef} className="themed-select-popover" role="listbox" aria-label={label} style={position}>{groups.map((group) => <section key={group.label} className="themed-select-group"><span>{group.label}</span>{group.options.map((option) => <button key={option.value} type="button" role="option" aria-selected={option.value === value} onClick={() => select(option.value)}><span>{option.label}</span>{option.value === value && <Check size={13} />}</button>)}</section>)}</div>, document.body)}
+    {open && createPortal(<div ref={menuRef} className="themed-select-popover" role="listbox" aria-label={label} style={position}>{groups.map((group) => <section key={group.label} className="themed-select-group"><span>{group.label}</span>{group.options.map((option) => <button key={option.value} type="button" role="option" aria-selected={option.value === value} onClick={() => select(option.value)}><span className="themed-select-option-copy"><strong>{option.label}</strong>{option.description && <small>{option.description}</small>}</span>{option.value === value && <Check size={13} />}</button>)}</section>)}</div>, document.body)}
   </span>
 }
diff --git a/src/renderer/src/components/app/AppMenuBar.tsx b/src/renderer/src/components/app/AppMenuBar.tsx
index be7a3ec..30001d8 100644
--- a/src/renderer/src/components/app/AppMenuBar.tsx
+++ b/src/renderer/src/components/app/AppMenuBar.tsx
@@ -94,9 +94,9 @@ export function AppMenuBar({
     <button className="brand" title="返回首页" aria-label="返回 MoonSprite 首页" onClick={() => { onHome(); closeMenu() }}><img className="brand-logo" src={moonspriteLogo} alt="" aria-hidden="true" /><span>MOONSPRITE</span><small>{APP_CHANNEL_LABEL}</small></button>
     <nav className="menu-strip" aria-label="主菜单" onPointerOver={(event) => { const button = (event.target as HTMLElement).closest('button[aria-expanded]'); const item = button?.parentElement; if (item?.parentElement !== event.currentTarget) return; hoverMenuAt(Array.from(event.currentTarget.children).indexOf(item)) }}>
       <div className="menu-item"><button aria-expanded={openMenu === 'file'} onClick={() => toggleMenu('file')}>文件</button>{openMenu === 'file' && <div className="menu-popover"><button onClick={() => { onNew(); closeMenu() }}>新建 <kbd>{shortcutFor('newDocument')}</kbd></button><button onClick={() => { onOpen(); closeMenu() }}>打开 <kbd>{shortcutFor('openDocument')}</kbd></button><div className="menu-submenu"><button className="menu-submenu-trigger">最近打开文件 <ChevronRight size={14} /></button><div className="menu-popover menu-submenu-popover recent-files-submenu">{recentFiles.length === 0 ? <button disabled>没有最近文件</button> : recentFiles.map((recent) => <button key={recent.filePath} title={recent.filePath} onClick={() => { onOpenRecent(recent.filePath); closeMenu() }}>{recent.fileName}</button>)}</div></div><span className="menu-divider" /><button disabled={!session} onClick={() => { void workspace.saveActive(); closeMenu() }}>保存 <kbd>{shortcutFor('save')}</kbd></button><button disabled={!session} onClick={() => { onSaveAs(); closeMenu() }}>另存为 <kbd>{shortcutFor('saveAs')}</kbd></button><button disabled={!session} onClick={() => { onExport(); closeMenu() }}>导出 <kbd>{shortcutFor('exportDocument')}</kbd></button><button disabled={!session?.document.filePath && !session?.document.sourceFilePath} onClick={() => { if (session) onOpenProjectFolder(session.document.id); closeMenu() }}>在文件夹中打开{shortcutHint('openProjectFolder')}</button></div>}</div>
-      <div className="menu-item"><button aria-expanded={openMenu === 'edit'} onClick={() => toggleMenu('edit')}>编辑</button>{openMenu === 'edit' && <div className="menu-popover"><button disabled={!session?.history.canUndo} onClick={() => { workspace.undo(); closeMenu() }}>撤销 <kbd>{shortcutFor('undo')}</kbd></button><button disabled={!session?.history.canRedo} onClick={() => { workspace.redo(); closeMenu() }}>重做 <kbd>{shortcutFor('redo')}</kbd></button><button disabled={!session || Boolean(session.selectedGroupId) || session.selectedLayerIds.length !== 1} onClick={() => { workspace.beginLayerTransform(); closeMenu() }}>变换 <kbd>{shortcutFor('transform')}</kbd></button><button disabled={!session?.selection} onClick={() => { workspace.deleteSelection(); closeMenu() }}>删除选区 <kbd>{shortcutFor('deleteLayer')}</kbd></button><button disabled={!session?.selection} onClick={() => { onOpenOutline(); closeMenu() }}>选区描边 <kbd>{shortcutFor('outline')}</kbd></button><button disabled={!session?.selection} onClick={() => { if (session?.selection) workspace.commitSelectionChange(session.selection, null, '取消选区'); closeMenu() }}>取消选择 <kbd>{shortcutFor('deselect')}</kbd></button><span className="menu-divider" /><div className="menu-submenu"><button className="menu-submenu-trigger" disabled={!session}>调整 <ChevronRight size={14} /></button><div className="menu-popover menu-submenu-popover"><button onClick={() => openAdjustment('color-balance')}>色彩平衡{shortcutHint('adjustmentColorBalance')}</button><button onClick={() => openAdjustment('brightness-contrast')}>亮度/对比度{shortcutHint('adjustmentBrightnessContrast')}</button><button onClick={() => openAdjustment('hue-saturation')}>色相/饱和度{shortcutHint('adjustmentHueSaturation')}</button><button onClick={() => openAdjustment('curves')}>曲线{shortcutHint('adjustmentCurves')}</button></div></div><span className="menu-divider" /><button onClick={() => { onOpenShortcuts(); closeMenu() }}>快捷键设置{shortcutHint('openShortcutSettings')}</button><button onClick={() => { onOpenPreferences(); closeMenu() }}>首选项{shortcutHint('openPreferences')}</button></div>}</div>
+      <div className="menu-item"><button aria-expanded={openMenu === 'edit'} onClick={() => toggleMenu('edit')}>编辑</button>{openMenu === 'edit' && <div className="menu-popover"><button disabled={!session?.history.canUndo} onClick={() => { workspace.undo(); closeMenu() }}>撤销 <kbd>{shortcutFor('undo')}</kbd></button><button disabled={!session?.history.canRedo} onClick={() => { workspace.redo(); closeMenu() }}>重做 <kbd>{shortcutFor('redo')}</kbd></button><div className="menu-submenu"><button className="menu-submenu-trigger">选择性粘贴 <ChevronRight size={14} /></button><div className="menu-popover menu-submenu-popover"><button onClick={() => { void workspace.pasteAsNewDocument(); closeMenu() }}>粘贴为新项目{shortcutHint('pasteAsNewDocument')}</button><button disabled={!session} onClick={() => { void workspace.pasteAsNewLayer(); closeMenu() }}>粘贴为新图层{shortcutHint('pasteAsNewLayer')}</button></div></div><button disabled={!session || Boolean(session.selectedGroupId) || session.selectedLayerIds.length !== 1} onClick={() => { workspace.beginLayerTransform(); closeMenu() }}>变换 <kbd>{shortcutFor('transform')}</kbd></button><button disabled={!session?.selection} onClick={() => { workspace.deleteSelection(); closeMenu() }}>删除选区 <kbd>{shortcutFor('deleteLayer')}</kbd></button><button disabled={!session?.selection} onClick={() => { onOpenOutline(); closeMenu() }}>选区描边 <kbd>{shortcutFor('outline')}</kbd></button><button disabled={!session?.selection} onClick={() => { workspace.invertSelection(); closeMenu() }}>反选选区{shortcutHint('invertSelection')}</button><button disabled={!session?.selection} onClick={() => { if (session?.selection) workspace.commitSelectionChange(session.selection, null, '取消选区'); closeMenu() }}>取消选择 <kbd>{shortcutFor('deselect')}</kbd></button><span className="menu-divider" /><div className="menu-submenu"><button className="menu-submenu-trigger" disabled={!session}>调整 <ChevronRight size={14} /></button><div className="menu-popover menu-submenu-popover"><button onClick={() => openAdjustment('color-balance')}>色彩平衡{shortcutHint('adjustmentColorBalance')}</button><button onClick={() => openAdjustment('brightness-contrast')}>亮度/对比度{shortcutHint('adjustmentBrightnessContrast')}</button><button onClick={() => openAdjustment('hue-saturation')}>色相/饱和度{shortcutHint('adjustmentHueSaturation')}</button><button onClick={() => openAdjustment('curves')}>曲线{shortcutHint('adjustmentCurves')}</button></div></div><span className="menu-divider" /><button onClick={() => { onOpenShortcuts(); closeMenu() }}>快捷键设置{shortcutHint('openShortcutSettings')}</button><button onClick={() => { onOpenPreferences(); closeMenu() }}>首选项{shortcutHint('openPreferences')}</button></div>}</div>
       <div className="menu-item"><button aria-expanded={openMenu === 'canvas'} onClick={() => toggleMenu('canvas')}>图像</button>{openMenu === 'canvas' && <div className="menu-popover"><button disabled={!session} onClick={() => { onOpenCanvasResize(); closeMenu() }}>调整画布尺寸 <kbd>{shortcutFor('canvasResize')}</kbd></button><button disabled={!session} onClick={() => { onOpenImageResize(); closeMenu() }}>调整图像尺寸 <kbd>{shortcutFor('imageResize')}</kbd></button><button disabled={!session} onClick={() => { if (session) void workspace.convertColorMode(session.document.colorMode === 'rgba' ? 'indexed' : 'rgba'); closeMenu() }}>{session?.document.colorMode === 'rgba' ? '转换为索引模式' : '转换为 RGBA 模式'}{shortcutHint('convertColorMode')}</button></div>}</div>
-      <div className="menu-item"><button aria-expanded={openMenu === 'layer'} onClick={() => toggleMenu('layer')}>图层</button>{openMenu === 'layer' && <div className="menu-popover"><button disabled={!session} onClick={() => { void workspace.addLayer(); closeMenu() }}>新建图层{shortcutHint('newLayer')}</button><button disabled={!session} onClick={() => { workspace.createLayerGroup(); closeMenu() }}>新建图层组 <kbd>{shortcutFor('createLayerGroup')}</kbd></button><button disabled={!session || Boolean(session.selectedGroupId)} onClick={() => { workspace.duplicateActiveLayer(); closeMenu() }}>复制图层{shortcutHint('duplicateLayer')}</button><button disabled={!session || Boolean(session.selectedGroupId)} onClick={() => { workspace.mergeActiveLayerDown(); closeMenu() }}>向下合并{shortcutHint('mergeLayerDown')}</button><button disabled={!session || Boolean(session.selectedGroupId) || session.selectedLayerIds.length < 2} onClick={() => { workspace.mergeSelectedLayers(); closeMenu() }}>合并所选图层{shortcutHint('mergeSelectedLayers')}</button><button disabled={!session?.selectedGroupId} onClick={() => { workspace.mergeSelectedGroup(); closeMenu() }}>合并图层组{shortcutHint('mergeLayerGroup')}</button><button disabled={!session || session.document.layers.length < 2} onClick={() => { workspace.mergeVisibleLayers(); closeMenu() }}>合并可见图层{shortcutHint('mergeVisibleLayers')}</button><button disabled={!session?.selectedGroupId} onClick={() => { workspace.ungroupSelected(); closeMenu() }}>解组 <kbd>{shortcutFor('ungroupLayers')}</kbd></button></div>}</div>
+      <div className="menu-item"><button aria-expanded={openMenu === 'layer'} onClick={() => toggleMenu('layer')}>图层</button>{openMenu === 'layer' && <div className="menu-popover"><button disabled={!session} onClick={() => { void workspace.addLayer(); closeMenu() }}>新建图层{shortcutHint('newLayer')}</button><button disabled={!session} onClick={() => { workspace.createLayerGroup(); closeMenu() }}>新建图层组 <kbd>{shortcutFor('createLayerGroup')}</kbd></button><button disabled={!session || Boolean(session.selectedGroupId)} onClick={() => { workspace.duplicateActiveLayer(); closeMenu() }}>复制图层{shortcutHint('duplicateLayer')}</button><button disabled={!session || Boolean(session.selectedGroupId)} onClick={() => { workspace.mergeActiveLayerDown(); closeMenu() }}>向下合并{shortcutHint('mergeLayerDown')}</button><button disabled={!session || Boolean(session.selectedGroupId) || session.selectedLayerIds.length < 2} onClick={() => { workspace.mergeSelectedLayers(); closeMenu() }}>合并所选图层{shortcutHint('mergeSelectedLayers')}</button><button disabled={!session?.selectedGroupId} onClick={() => { workspace.mergeSelectedGroup(); closeMenu() }}>合并图层组{shortcutHint('mergeLayerGroup')}</button><button disabled={!session || session.document.layers.length < 2} onClick={() => { workspace.mergeVisibleLayers(); closeMenu() }}>合并可见图层{shortcutHint('mergeVisibleLayers')}</button><button disabled={!session?.selectedGroupId} onClick={() => { workspace.ungroupSelected(); closeMenu() }}>解组 <kbd>{shortcutFor('ungroupLayers')}</kbd></button><button disabled={!session?.selection} onClick={() => { workspace.toggleSelectionOutline(); closeMenu() }}>{session?.view.showSelectionOutline === false ? '显示蚂蚁线' : '隐藏蚂蚁线'}{shortcutHint('toggleSelectionOutline')}<span className="menu-check">{session?.view.showSelectionOutline === false && <Check size={14} />}</span></button></div>}</div>
       <div className="menu-item"><button aria-expanded={openMenu === 'window'} onClick={() => toggleMenu('window')}>窗口</button>{openMenu === 'window' && <div className="menu-popover">
         <button disabled={!session} onClick={() => { workspace.toggleGrid(); closeMenu() }}>显示像素网格{shortcutHint('toggleGrid')}<span className="menu-check">{session?.view.showGrid && <Check size={14} />}</span></button>
         <button disabled={!session} onClick={() => { if (session) workspace.setView({ relativeLuminance: !session.view.relativeLuminance }); closeMenu() }}>查看相对明暗 <kbd>{shortcutFor('relativeLuminance')}</kbd><span className="menu-check">{session?.view.relativeLuminance && <Check size={14} />}</span></button>
diff --git a/src/renderer/src/components/app/DocumentTabs.tsx b/src/renderer/src/components/app/DocumentTabs.tsx
index b7192a8..0b798de 100644
--- a/src/renderer/src/components/app/DocumentTabs.tsx
+++ b/src/renderer/src/components/app/DocumentTabs.tsx
@@ -47,7 +47,10 @@ export const DocumentTabs = memo(function DocumentTabs({ homeOpen, onNew, onActi
     const closeOutside = (event: PointerEvent): void => {
       if (event.target instanceof Element && !event.target.closest('.document-tab, .document-tab-context-menu')) setContextMenu(null)
     }
-    const close = (): void => setContextMenu(null)
+    const close = (event?: Event): void => {
+      const target = (event as CustomEvent<{ target?: string }> | undefined)?.detail?.target
+      if (!target || target === 'popover') setContextMenu(null)
+    }
     window.addEventListener('pointerdown', closeOutside, true)
     window.addEventListener('blur', close)
     window.addEventListener('moonsprite:close-dialog', close)
diff --git a/src/renderer/src/components/app/EditorToolOptions.tsx b/src/renderer/src/components/app/EditorToolOptions.tsx
index a02a83e..245469d 100644
--- a/src/renderer/src/components/app/EditorToolOptions.tsx
+++ b/src/renderer/src/components/app/EditorToolOptions.tsx
@@ -1,15 +1,25 @@
 import { memo, useEffect, useRef, useState } from 'react'
-import { Check, ChevronDown, Redo2, RefreshCw, Trash2, Undo2 } from 'lucide-react'
-import type { ImageBrush, ImageBrushSettings, ProceduralBrushId, ProceduralBrushSettings, RgbaColor } from '@shared/types'
+import { ArrowLeftRight, Check, ChevronDown, Redo2, RefreshCw, Trash2, Undo2 } from 'lucide-react'
+import type { BrushPaintMode, ImageBrush, ImageBrushSettings, ProceduralBrushId, ProceduralBrushSettings, RgbaColor, SelectionMode } from '@shared/types'
 import { NumberInput } from '@/components/NumberInput'
 import { PerformanceProfiler } from '@/components/PerformanceProfiler'
+import { ThemedSelect } from '@/components/ThemedSelect'
 import { toolOptionsRenderKey } from '@/core/app-render-keys'
 import { isProceduralBrushId } from '@/core/brushes'
 import { brushMaskOffsets, brushStampDimensions } from '@/core/tools'
 import { loadEditorPreferences, type CheckerboardPreferences } from '@/core/file-preferences'
 import { useWorkspace } from '@/store/workspace'
 import { useBrushLibrary } from './useBrushLibrary'
-import { PixelAssetIcon, PixelShapeIcon, SELECTION_MODES, TOOL_DEFINITIONS } from './editor-tools'
+import { PixelAssetIcon, PixelShapeIcon, SELECTION_MODES, activeToolPresentation, temporarySelectionModeForModifiers } from './editor-tools'
+
+const brushPaintModeGroups = [{
+  label: '笔刷模式',
+  options: [
+    { value: 'pattern-source' as const, label: '图案与来源对齐', description: '平铺固定在创建笔刷时的来源坐标' },
+    { value: 'pattern-target' as const, label: '图案与目标对齐', description: '平铺从每次第一笔落点开始' },
+    { value: 'paint' as const, label: '油漆笔刷', description: '每个落点重复完整笔刷图案' }
+  ]
+}]
 
 function GrayscaleBrushThumbnail({ brush }: { brush: ImageBrush }) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -63,10 +73,12 @@ function GrayscaleBrushPreview({ brush, settings, color, paintMode, proceduralAn
     const pixelScale = Math.max(1, Math.floor(64 / Math.max(stamp.width, stamp.height)))
     const startX = Math.floor((canvas.width - stamp.width * pixelScale) / 2)
     const startY = Math.floor((canvas.height - stamp.height * pixelScale) / 2)
-    context.fillStyle = `rgb(${color.r} ${color.g} ${color.b})`
-    const previewMode = paintMode === 'pattern-source' ? 'paint' : paintMode
-    for (const point of brushMaskOffsets(stampSize, 'square', 'solid', 1, 0, 0, brush, settings, proceduralAntialiasStrength, previewMode)) {
-      context.globalAlpha = color.a / 255 * point.coverage / 255
+    const originX = paintMode === 'pattern-source' ? brush.sourceX ?? 0 : 0
+    const originY = paintMode === 'pattern-source' ? brush.sourceY ?? 0 : 0
+    for (const point of brushMaskOffsets(stampSize, 'square', 'solid', 1, originX, originY, brush, settings, proceduralAntialiasStrength, paintMode, 0, 0)) {
+      const pointColor = point.color ?? color
+      context.fillStyle = `rgb(${pointColor.r} ${pointColor.g} ${pointColor.b})`
+      context.globalAlpha = pointColor.a / 255 * point.coverage / 255
       context.fillRect(startX + point.x * pixelScale, startY + point.y * pixelScale, pixelScale, pixelScale)
     }
     context.globalAlpha = 1
@@ -154,6 +166,7 @@ export const EditorToolOptions = memo(function EditorToolOptions() {
   ))
   const [brushFlyoutOpen, setBrushFlyoutOpen] = useState(false)
   const [brushSizeFlyoutOpen, setBrushSizeFlyoutOpen] = useState(false)
+  const [temporarySelectionMode, setTemporarySelectionMode] = useState<SelectionMode | null>(null)
   const [brushOutputOpen, setBrushOutputOpen] = useState(false)
   const state = useWorkspace.getState()
   const session = state.sessions.find((item) => item.document.id === state.activeId) ?? null
@@ -177,7 +190,9 @@ export const EditorToolOptions = memo(function EditorToolOptions() {
       if (!event.target.closest('.brush-size-control')) setBrushSizeFlyoutOpen(false)
     }
     const closeOnBlur = (): void => setBrushFlyoutOpen(false)
-    const closeAll = (): void => {
+    const closeAll = (event: Event): void => {
+      const target = (event as CustomEvent<{ target?: string }>).detail?.target
+      if (target && target !== 'popover') return
       setBrushFlyoutOpen(false)
       setBrushSizeFlyoutOpen(false)
       setBrushOutputOpen(false)
@@ -199,12 +214,62 @@ export const EditorToolOptions = memo(function EditorToolOptions() {
     }
   }, [renderKey, session?.tool])
 
+  useEffect(() => {
+    if (session?.tool !== 'selection') {
+      setTemporarySelectionMode(null)
+      return
+    }
+    let shiftHeld = false
+    let secondaryHeld = false
+    const refresh = (): void => setTemporarySelectionMode(temporarySelectionModeForModifiers(shiftHeld, secondaryHeld))
+    const keyDown = (event: KeyboardEvent): void => {
+      if (event.key !== 'Shift') return
+      shiftHeld = true
+      refresh()
+    }
+    const keyUp = (event: KeyboardEvent): void => {
+      if (event.key !== 'Shift') return
+      shiftHeld = false
+      refresh()
+    }
+    const pointerDown = (event: PointerEvent): void => {
+      if (event.button !== 2 || !(event.target instanceof Element) || !event.target.closest('.stage-canvas')) return
+      secondaryHeld = true
+      refresh()
+    }
+    const pointerUp = (event: PointerEvent): void => {
+      if (event.button !== 2) return
+      secondaryHeld = false
+      refresh()
+    }
+    const reset = (): void => {
+      shiftHeld = false
+      secondaryHeld = false
+      refresh()
+    }
+    window.addEventListener('keydown', keyDown, true)
+    window.addEventListener('keyup', keyUp, true)
+    window.addEventListener('pointerdown', pointerDown, true)
+    window.addEventListener('pointerup', pointerUp, true)
+    window.addEventListener('pointercancel', reset, true)
+    window.addEventListener('blur', reset)
+    return () => {
+      window.removeEventListener('keydown', keyDown, true)
+      window.removeEventListener('keyup', keyUp, true)
+      window.removeEventListener('pointerdown', pointerDown, true)
+      window.removeEventListener('pointerup', pointerUp, true)
+      window.removeEventListener('pointercancel', reset, true)
+      window.removeEventListener('blur', reset)
+    }
+  }, [session?.tool])
+
   if (!session) return null
   const workspace = useWorkspace.getState()
   const isBrushTool = session.tool === 'pencil' || session.tool === 'eraser' || session.tool === 'fill'
+  const presentation = activeToolPresentation(session.tool, session.selectionKind, session.shapeKind)
 
   return <PerformanceProfiler id="EditorToolOptions"><div className="tool-options">
-    <span className="tool-label">{TOOL_DEFINITIONS.find((tool) => tool.id === session.tool)?.label}</span>
+    <span className="tool-label" title={presentation.description}>{presentation.label}</span>
     {isBrushTool && <>
       {session.brushImage && <button type="button" className="brush-return-button" title="返回基础笔刷" onClick={() => { workspace.setBrushImage(null); setBrushFlyoutOpen(false) }}>返回</button>}
       <div className="brush-source">
@@ -257,13 +322,14 @@ export const EditorToolOptions = memo(function EditorToolOptions() {
         </>}
       </div>
       {!session.brushImage?.intrinsicSize && <div className="brush-size-control" onPointerDown={() => setBrushSizeFlyoutOpen(true)}><NumberInput aria-label="笔刷尺寸数值" min={1} max={128} suffix="px" value={session.brushSize} onValueChange={workspace.setBrushSize} onFocus={() => setBrushSizeFlyoutOpen(true)} />{brushSizeFlyoutOpen && <div className="brush-size-popover" role="dialog" aria-label="调整笔刷尺寸"><input aria-label="笔刷尺寸滑条" type="range" min="1" max="128" value={session.brushSize} onChange={(event) => workspace.setBrushSize(Number(event.target.value))} /><strong>{session.brushSize}px</strong></div>}</div>}
-      {session.brushImage?.intrinsicSize && <select className="brush-paint-mode-select" aria-label="笔刷模式" title="图案与来源对齐：按笔刷来源位置平铺；图案与目标对齐：按当前落点平铺；油漆笔刷：按画布原点平铺" value={session.brushPaintMode} onChange={(event) => workspace.setBrushPaintMode(event.target.value as typeof session.brushPaintMode)}><option value="pattern-source">图案与来源对齐</option><option value="pattern-target">图案与目标对齐</option><option value="paint">油漆笔刷</option></select>}
+      {session.brushImage?.intrinsicSize && <span className="brush-paint-mode-select" title="图案与来源对齐：固定使用创建笔刷时的来源坐标平铺；图案与目标对齐：以每次第一笔落点作为平铺原点；油漆笔刷：每个落点独立盖章"><ThemedSelect<BrushPaintMode> value={session.brushPaintMode} groups={brushPaintModeGroups} label="笔刷模式" onChange={workspace.setBrushPaintMode} /></span>}
       {(session.tool === 'pencil' || session.tool === 'eraser') && <label className="tool-checkbox"><input type="checkbox" checked={session.perfectPixels} onChange={(event) => workspace.setPerfectPixels(event.target.checked)} />完美像素</label>}
     </>}
     {session.tool === 'selection' && <>
-      <div className="segmented-control selection-mode-control" aria-label="选区模式">{SELECTION_MODES.map((mode) => <button key={mode.id} title={mode.label} aria-label={mode.label} className={session.selectionMode === mode.id ? 'selected' : ''} onClick={() => workspace.setSelectionMode(mode.id)}><PixelAssetIcon src={mode.icon} /></button>)}</div>
+      <div className="segmented-control selection-mode-control" aria-label="选区模式">{SELECTION_MODES.map((mode) => <button key={mode.id} title={mode.label} aria-label={mode.label} className={(temporarySelectionMode ?? session.selectionMode) === mode.id ? 'selected' : ''} onClick={() => workspace.setSelectionMode(mode.id)}><PixelAssetIcon src={mode.icon} /></button>)}</div>
       {session.selectionKind === 'magic' && <><label className="wand-tolerance">容差 <NumberInput aria-label="魔棒容差" min={0} max={255} value={session.wandTolerance} onValueChange={workspace.setWandTolerance} /></label><label className="tool-checkbox"><input aria-label="连续选择" type="checkbox" checked={session.wandContiguous} onChange={(event) => workspace.setWandContiguous(event.target.checked)} />连续</label></>}
     </>}
+    {session.tool === 'shape' && <div className="shape-ratio-control"><label className="tool-checkbox"><input type="checkbox" checked={session.shapeRatio !== null} onChange={(event) => workspace.setShapeRatio(event.target.checked ? { width: 1, height: 1 } : null)} />固定比例</label>{session.shapeRatio !== null && <div className="shape-ratio-inputs"><NumberInput aria-label="形状宽度比例" min={0.1} max={100} step={0.1} value={session.shapeRatio.width} onValueChange={(width) => workspace.setShapeRatio({ ...session.shapeRatio!, width })} /><span>:</span><NumberInput aria-label="形状高度比例" min={0.1} max={100} step={0.1} value={session.shapeRatio.height} onValueChange={(height) => workspace.setShapeRatio({ ...session.shapeRatio!, height })} /><button type="button" className="icon-button shape-ratio-swap" title="交换宽高比例" aria-label="交换宽高比例" onClick={() => workspace.setShapeRatio({ width: session.shapeRatio!.height, height: session.shapeRatio!.width })}><ArrowLeftRight size={13} /></button></div>}</div>}
     {session.tool === 'fill' && <div className="segmented-control fill-mode-control" aria-label="填充范围"><button className={session.fillMode === 'contiguous' ? 'selected' : ''} onClick={() => workspace.setFillMode('contiguous')}>连续</button><button className={session.fillMode === 'global' ? 'selected' : ''} onClick={() => workspace.setFillMode('global')}>不连续</button></div>}
     {session.tool === 'move' && <label className="tool-checkbox"><input type="checkbox" checked={session.moveAutoSelect} onChange={(event) => workspace.setMoveAutoSelect(event.target.checked)} />自动选择图层</label>}
     {session.tool === 'rotate' && <div className="rotate-view-options"><label>旋转度数 <NumberInput aria-label="旋转度数" min={0} max={359.9} step={0.1} value={Math.round(session.view.rotation * 10) / 10} onValueChange={(rotation) => workspace.setView({ rotation: ((rotation % 360) + 360) % 360 })} /></label><button type="button" className="tool-text-button" onClick={() => workspace.setView({ rotation: 0 })}>复位视图</button></div>}
diff --git a/src/renderer/src/components/app/EditorToolRail.test.tsx b/src/renderer/src/components/app/EditorToolRail.test.tsx
new file mode 100644
index 0000000..b5a2853
--- /dev/null
+++ b/src/renderer/src/components/app/EditorToolRail.test.tsx
@@ -0,0 +1,38 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createDocument } from '@/core/document'
+import { useWorkspace } from '@/store/workspace'
+import { EditorToolRail } from './EditorToolRail'
+import { ALL_EDITOR_TOOL_ICONS, SELECTION_KIND_ICONS, SHAPE_KIND_DEFINITIONS } from './editor-tools'
+
+beforeEach(() => {
+  localStorage.clear()
+  useWorkspace.setState({ sessions: [], activeId: null, message: null, dialog: null })
+  useWorkspace.getState().addSession(createDocument('tool rail', 2, 2, 'rgba'))
+})
+
+afterEach(cleanup)
+
+describe('EditorToolRail', () => {
+  it('keeps every child-tool icon mounted for immediate decoding', () => {
+    const { container } = render(<EditorToolRail side="left" onGripPointerDown={vi.fn()} />)
+    const preloaded = [...container.querySelectorAll<HTMLImageElement>('.tool-icon-preload img')].map((image) => image.getAttribute('src'))
+
+    expect(preloaded).toHaveLength(ALL_EDITOR_TOOL_ICONS.length)
+    expect(preloaded).toEqual(expect.arrayContaining(ALL_EDITOR_TOOL_ICONS))
+  })
+
+  it('updates the main tool button in the same click that selects a child tool', () => {
+    render(<EditorToolRail side="left" onGripPointerDown={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('button', { name: '矩形框选工具' }))
+    fireEvent.click(screen.getByRole('button', { name: '多边形套索工具' }))
+    const polygonButton = screen.getByRole('button', { name: '多边形套索工具' })
+    expect(polygonButton.querySelector('img')).toHaveAttribute('src', SELECTION_KIND_ICONS['polygon-lasso'])
+
+    fireEvent.click(screen.getByRole('button', { name: '矩形填充工具' }))
+    fireEvent.click(screen.getByRole('button', { name: '椭圆工具' }))
+    const ellipseButton = screen.getByRole('button', { name: '椭圆工具' })
+    expect(ellipseButton.querySelector('img')).toHaveAttribute('src', SHAPE_KIND_DEFINITIONS.find((item) => item.id === 'ellipse-outline')?.icon)
+  })
+})
diff --git a/src/renderer/src/components/app/EditorToolRail.tsx b/src/renderer/src/components/app/EditorToolRail.tsx
index dcaffe8..20968e2 100644
--- a/src/renderer/src/components/app/EditorToolRail.tsx
+++ b/src/renderer/src/components/app/EditorToolRail.tsx
@@ -1,9 +1,11 @@
 import { memo, useEffect, useState, type PointerEvent as ReactPointerEvent } from 'react'
 import { GripVertical } from 'lucide-react'
 import { PerformanceProfiler } from '@/components/PerformanceProfiler'
+import { Tooltip } from '@/components/Tooltip'
 import { toolRailRenderKey } from '@/core/app-render-keys'
+import { loadShortcuts } from '@/core/shortcuts'
 import { useWorkspace } from '@/store/workspace'
-import { PixelAssetIcon, PixelShapeIcon, SELECTION_KIND_ICONS, TOOL_DEFINITIONS } from './editor-tools'
+import { ALL_EDITOR_TOOL_ICONS, PixelAssetIcon, SELECTION_KIND_DEFINITIONS, SELECTION_KIND_ICONS, SHAPE_KIND_DEFINITIONS, TOOL_DEFINITIONS, activeToolPresentation } from './editor-tools'
 
 interface EditorToolRailProps {
   side: 'left' | 'right'
@@ -16,9 +18,16 @@ export const EditorToolRail = memo(function EditorToolRail({ side, onGripPointer
   ))
   const [shapeFlyoutOpen, setShapeFlyoutOpen] = useState(false)
   const [selectionFlyoutOpen, setSelectionFlyoutOpen] = useState(false)
+  const [shortcuts, setShortcuts] = useState(() => loadShortcuts())
   const state = useWorkspace.getState()
   const session = state.sessions.find((item) => item.document.id === state.activeId) ?? null
 
+  useEffect(() => {
+    const refreshShortcuts = (): void => setShortcuts(loadShortcuts())
+    window.addEventListener('moonsprite:shortcuts-changed', refreshShortcuts)
+    return () => window.removeEventListener('moonsprite:shortcuts-changed', refreshShortcuts)
+  }, [])
+
   useEffect(() => {
     const closeOutside = (event: PointerEvent): void => {
       if (event.target instanceof Element && !event.target.closest('.tool-slot')) {
@@ -26,7 +35,9 @@ export const EditorToolRail = memo(function EditorToolRail({ side, onGripPointer
         setSelectionFlyoutOpen(false)
       }
     }
-    const closeAll = (): void => {
+    const closeAll = (event: Event): void => {
+      const target = (event as CustomEvent<{ target?: string }>).detail?.target
+      if (target && target !== 'popover') return
       setShapeFlyoutOpen(false)
       setSelectionFlyoutOpen(false)
     }
@@ -47,30 +58,31 @@ export const EditorToolRail = memo(function EditorToolRail({ side, onGripPointer
 
   if (!session) return null
   const workspace = useWorkspace.getState()
+  const flyoutTooltip = (label: string, description: string, shortcut: string) => <><strong>{label}</strong><span>{description}</span><small>快捷键：{shortcut || '未设置'}</small></>
 
   return <PerformanceProfiler id="EditorToolRail"><aside className={`tool-rail side-${side}`} aria-label="工具栏">
+    <span className="tool-icon-preload" aria-hidden="true">
+      {ALL_EDITOR_TOOL_ICONS.map((source) => <img key={source} src={source} alt="" decoding="sync" draggable={false} />)}
+    </span>
     <button className="tool-rail-grip" type="button" aria-label="移动工具栏" title="拖动工具栏到左侧或右侧" onPointerDown={onGripPointerDown}><GripVertical size={14} /></button>
     {TOOL_DEFINITIONS.map((tool) => {
-      const displayedIcon = tool.id === 'selection' ? SELECTION_KIND_ICONS[session.selectionKind] : tool.icon
+      const presentation = activeToolPresentation(tool.id, session.selectionKind, session.shapeKind)
+      const shortcut = shortcuts[presentation.shortcutId] ?? ''
       const openToolFlyout = (): void => {
         workspace.setTool(tool.id)
         setShapeFlyoutOpen(tool.id === 'shape' ? !shapeFlyoutOpen : false)
         setSelectionFlyoutOpen(tool.id === 'selection' ? !selectionFlyoutOpen : false)
       }
       return <div className="tool-slot" key={tool.id}>
-        <button className={session.tool === tool.id ? 'selected' : ''} aria-label={tool.label} title={`${tool.label} (${tool.key})`} onClick={openToolFlyout}>
-          <PixelAssetIcon src={displayedIcon} className="rail-tool-icon" />
-          <small>{tool.key}</small>
-        </button>
+        <Tooltip className="rail-tool-tooltip" content={flyoutTooltip(presentation.label, presentation.description, shortcut)}><button className={session.tool === tool.id ? 'selected' : ''} aria-label={presentation.label} onClick={openToolFlyout}>
+          <PixelAssetIcon src={presentation.icon} className="rail-tool-icon" />
+          <small>{shortcut}</small>
+        </button></Tooltip>
         {tool.id === 'selection' && selectionFlyoutOpen && <div className="tool-flyout selection-flyout" role="dialog" aria-label="选择选区方式">
-          <button className={session.selectionKind === 'rectangle' ? 'selected' : ''} title="矩形选区" aria-label="矩形选区" onClick={() => { workspace.setSelectionKind('rectangle'); setSelectionFlyoutOpen(false) }}><PixelAssetIcon src={SELECTION_KIND_ICONS.rectangle} /></button>
-          <button className={session.selectionKind === 'ellipse' ? 'selected' : ''} title="椭圆选区 (Shift+M)" aria-label="椭圆选区" onClick={() => { workspace.setSelectionKind('ellipse'); setSelectionFlyoutOpen(false) }}><PixelAssetIcon src={SELECTION_KIND_ICONS.ellipse} /></button>
-          <button className={session.selectionKind === 'lasso' ? 'selected' : ''} title="套索选区 (Q)" aria-label="套索选区" onClick={() => { workspace.setSelectionKind('lasso'); setSelectionFlyoutOpen(false) }}><PixelAssetIcon src={SELECTION_KIND_ICONS.lasso} /></button>
-          <button className={session.selectionKind === 'magic' ? 'selected' : ''} title="魔棒选区" aria-label="魔棒选区" onClick={() => { workspace.setSelectionKind('magic'); setSelectionFlyoutOpen(false) }}><PixelAssetIcon src={SELECTION_KIND_ICONS.magic} /></button>
+          {SELECTION_KIND_DEFINITIONS.map((definition) => <Tooltip key={definition.id} className="tool-flyout-tooltip" content={flyoutTooltip(definition.label, definition.description, shortcuts[definition.shortcutId] ?? '')}><button className={session.selectionKind === definition.id ? 'selected' : ''} aria-label={definition.label} onClick={() => { workspace.setSelectionKind(definition.id); setSelectionFlyoutOpen(false) }}><PixelAssetIcon src={SELECTION_KIND_ICONS[definition.id]} /></button></Tooltip>)}
         </div>}
         {tool.id === 'shape' && shapeFlyoutOpen && <div className="tool-flyout shape-flyout" role="dialog" aria-label="快速选择形状">
-          <button className={session.shapeKind === 'rectangle' ? 'selected' : ''} title="矩形" aria-label="矩形" onClick={() => { workspace.setShapeKind('rectangle'); setShapeFlyoutOpen(false) }}><PixelShapeIcon kind="rectangle" /></button>
-          <button className={session.shapeKind === 'ellipse' ? 'selected' : ''} title="圆形" aria-label="圆形" onClick={() => { workspace.setShapeKind('ellipse'); setShapeFlyoutOpen(false) }}><PixelShapeIcon kind="ellipse" /></button>
+          {SHAPE_KIND_DEFINITIONS.map((definition) => <Tooltip key={definition.id} className="tool-flyout-tooltip" content={flyoutTooltip(definition.label, definition.description, `${shortcuts[definition.shortcutId] || '未设置'}（进入形状工具）`)}><button className={session.shapeKind === definition.id ? 'selected' : ''} aria-label={definition.label} onClick={() => { workspace.setShapeKind(definition.id); setShapeFlyoutOpen(false) }}><PixelAssetIcon src={definition.icon} /></button></Tooltip>)}
         </div>}
       </div>
     })}
diff --git a/src/renderer/src/components/app/editor-tools.test.ts b/src/renderer/src/components/app/editor-tools.test.ts
new file mode 100644
index 0000000..8693e98
--- /dev/null
+++ b/src/renderer/src/components/app/editor-tools.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import { ALL_EDITOR_TOOL_ICONS, SELECTION_KIND_DEFINITIONS, SHAPE_KIND_DEFINITIONS, TOOL_DEFINITIONS, activeToolPresentation, temporarySelectionModeForModifiers } from './editor-tools'
+
+describe('editor tool flyout definitions', () => {
+  it('gives every main tool complete custom-tooltip metadata', () => {
+    expect(TOOL_DEFINITIONS.every((item) => item.description.length > 0 && item.shortcutId.length > 0)).toBe(true)
+  })
+
+  it('keeps all selection tools in the requested order with complete tooltip metadata', () => {
+    expect(SELECTION_KIND_DEFINITIONS.map((item) => [item.id, item.label])).toEqual([
+      ['rectangle', '矩形框选工具'],
+      ['ellipse', '椭圆框选工具'],
+      ['lasso', '套索工具'],
+      ['polygon-lasso', '多边形套索工具'],
+      ['magic', '魔棒工具']
+    ])
+    expect(SELECTION_KIND_DEFINITIONS.every((item) => item.description.length > 0 && item.shortcutId.length > 0)).toBe(true)
+  })
+
+  it('keeps all shape tools in outline-first order with shortcut help', () => {
+    expect(SHAPE_KIND_DEFINITIONS.map((item) => [item.id, item.label])).toEqual([
+      ['rectangle-outline', '矩形工具'],
+      ['rectangle', '矩形填充工具'],
+      ['ellipse-outline', '椭圆工具'],
+      ['ellipse', '椭圆填充工具']
+    ])
+    expect(SHAPE_KIND_DEFINITIONS.every((item) => item.shortcutId === 'tool.shape')).toBe(true)
+    expect(SHAPE_KIND_DEFINITIONS.every((item) => item.icon.length > 0)).toBe(true)
+  })
+
+  it('presents the selected child tool in the main rail and options bar', () => {
+    expect(activeToolPresentation('selection', 'polygon-lasso', 'rectangle').label).toBe('多边形套索工具')
+    expect(activeToolPresentation('shape', 'rectangle', 'ellipse-outline').label).toBe('椭圆工具')
+    expect(activeToolPresentation('shape', 'rectangle', 'ellipse-outline').icon).toBe(
+      SHAPE_KIND_DEFINITIONS.find((item) => item.id === 'ellipse-outline')?.icon
+    )
+  })
+
+  it('exposes every tool image for eager decoding before a flyout opens', () => {
+    expect(ALL_EDITOR_TOOL_ICONS).toContain(SHAPE_KIND_DEFINITIONS.find((item) => item.id === 'rectangle')?.icon)
+    expect(ALL_EDITOR_TOOL_ICONS).toContain(SHAPE_KIND_DEFINITIONS.find((item) => item.id === 'ellipse-outline')?.icon)
+  })
+
+  it('shows temporary add and subtract modes without replacing the persisted mode', () => {
+    expect(temporarySelectionModeForModifiers(true, false)).toBe('add')
+    expect(temporarySelectionModeForModifiers(true, true)).toBe('subtract')
+    expect(temporarySelectionModeForModifiers(false, false)).toBeNull()
+  })
+})
diff --git a/src/renderer/src/components/app/editor-tools.tsx b/src/renderer/src/components/app/editor-tools.tsx
index 6a2c098..f600c0e 100644
--- a/src/renderer/src/components/app/editor-tools.tsx
+++ b/src/renderer/src/components/app/editor-tools.tsx
@@ -1,4 +1,5 @@
-import type { ToolId } from '@shared/types'
+import type { SelectionKind, SelectionMode, ShapeKind, ToolId } from '@shared/types'
+import type { ShortcutId } from '@/core/shortcuts'
 import toolSelectionIcon from '@/assets/tool-icons/tool-selection.png'
 import toolPencilIcon from '@/assets/tool-icons/tool-pencil.png'
 import toolEraserIcon from '@/assets/tool-icons/tool-eraser.png'
@@ -12,32 +13,88 @@ import toolShapeIcon from '@/assets/tool-icons/tool-shape.png'
 import selectionRectangleIcon from '@/assets/tool-icons/selection-rectangle.png'
 import selectionEllipseIcon from '@/assets/tool-icons/selection-ellipse.png'
 import selectionLassoIcon from '@/assets/tool-icons/selection-lasso.png'
+import selectionPolygonLassoIcon from '@/assets/tool-icons/selection-polygon-lasso.png'
 import selectionMagicIcon from '@/assets/tool-icons/selection-magic.png'
 import selectionReplaceIcon from '@/assets/tool-icons/selection-replace.png'
 import selectionAddIcon from '@/assets/tool-icons/selection-add.png'
 import selectionSubtractIcon from '@/assets/tool-icons/selection-subtract.png'
 import selectionIntersectIcon from '@/assets/tool-icons/selection-intersect.png'
+import shapeRectangleFillIcon from '@/assets/tool-icons/shape-rectangle-fill.png'
+import shapeRectangleIcon from '@/assets/tool-icons/shape-rectangle.png'
+import shapeEllipseFillIcon from '@/assets/tool-icons/shape-ellipse-fill.png'
+import shapeEllipseIcon from '@/assets/tool-icons/shape-ellipse.png'
 
-export const TOOL_DEFINITIONS: Array<{ id: ToolId; label: string; icon: string; key: string }> = [
-  { id: 'pencil', label: '铅笔', icon: toolPencilIcon, key: 'B' },
-  { id: 'eraser', label: '橡皮擦', icon: toolEraserIcon, key: 'E' },
-  { id: 'selection', label: '选区', icon: toolSelectionIcon, key: 'M' },
-  { id: 'move', label: '移动', icon: toolMoveIcon, key: 'V' },
-  { id: 'shape', label: '形状', icon: toolShapeIcon, key: 'U' },
-  { id: 'fill', label: '油漆桶', icon: toolFillIcon, key: 'G' },
-  { id: 'eyedropper', label: '吸管', icon: toolEyedropperIcon, key: 'I' },
-  { id: 'hand', label: '抓手', icon: toolHandIcon, key: 'H' },
-  { id: 'zoom', label: '缩放', icon: toolZoomIcon, key: 'Z' },
-  { id: 'rotate', label: '旋转视图', icon: toolRotateIcon, key: 'R' }
+export const TOOL_DEFINITIONS: Array<{ id: ToolId; label: string; description: string; icon: string; shortcutId: ShortcutId }> = [
+  { id: 'pencil', label: '铅笔工具', description: '按住拖动绘制像素；按住 Shift 可从上次落点连接直线。', icon: toolPencilIcon, shortcutId: 'tool.pencil' },
+  { id: 'eraser', label: '橡皮擦工具', description: '按住拖动擦除当前图层中的像素。', icon: toolEraserIcon, shortcutId: 'tool.eraser' },
+  { id: 'selection', label: '选区工具', description: '创建、组合或变换选区；再次单击可展开选区工具。', icon: toolSelectionIcon, shortcutId: 'tool.selection' },
+  { id: 'move', label: '移动工具', description: '拖动当前图层、所选图层或选区中的内容。', icon: toolMoveIcon, shortcutId: 'tool.move' },
+  { id: 'shape', label: '形状工具', description: '拖动绘制矩形或椭圆；再次单击可选择形状。', icon: toolShapeIcon, shortcutId: 'tool.shape' },
+  { id: 'fill', label: '油漆桶工具', description: '单击填充连续区域；右键使用背景色。', icon: toolFillIcon, shortcutId: 'tool.fill' },
+  { id: 'eyedropper', label: '吸管工具', description: '单击或拖动读取画布颜色；右键设置背景色。', icon: toolEyedropperIcon, shortcutId: 'tool.eyedropper' },
+  { id: 'hand', label: '抓手工具', description: '按住拖动画布视图，不会修改像素内容。', icon: toolHandIcon, shortcutId: 'tool.hand' },
+  { id: 'zoom', label: '缩放工具', description: '拖动或单击调整视图缩放，右键执行反向缩放。', icon: toolZoomIcon, shortcutId: 'tool.zoom' },
+  { id: 'rotate', label: '旋转视图工具', description: '围绕旋转指向标拖动，只旋转当前画布视图。', icon: toolRotateIcon, shortcutId: 'tool.rotate' }
 ]
 
 export const SELECTION_KIND_ICONS = {
   rectangle: selectionRectangleIcon,
   ellipse: selectionEllipseIcon,
   lasso: selectionLassoIcon,
+  'polygon-lasso': selectionPolygonLassoIcon,
   magic: selectionMagicIcon
 } as const
 
+export const SELECTION_KIND_DEFINITIONS: Array<{
+  id: SelectionKind
+  label: string
+  description: string
+  shortcutId: ShortcutId
+}> = [
+  { id: 'rectangle', label: '矩形框选工具', description: '拖动建立矩形选区；按住 Shift 可创建正方形选区。', shortcutId: 'tool.selection' },
+  { id: 'ellipse', label: '椭圆框选工具', description: '拖动建立椭圆选区；按住 Shift 可创建圆形选区。', shortcutId: 'tool.selection.ellipse' },
+  { id: 'lasso', label: '套索工具', description: '按住并沿目标边缘自由拖动，松开后闭合选区。', shortcutId: 'lasso' },
+  { id: 'polygon-lasso', label: '多边形套索工具', description: '逐点单击建立边界，双击、点击起点或按 Enter 完成。', shortcutId: 'polygonLasso' },
+  { id: 'magic', label: '魔棒工具', description: '单击选择颜色相近的连续区域，可在属性栏调整容差。', shortcutId: 'magic' }
+]
+
+export const SHAPE_KIND_DEFINITIONS: Array<{
+  id: ShapeKind
+  label: string
+  description: string
+  shortcutId: ShortcutId
+  icon: string
+}> = [
+  { id: 'rectangle-outline', label: '矩形工具', description: '拖动绘制只有描边的矩形。', shortcutId: 'tool.shape', icon: shapeRectangleIcon },
+  { id: 'rectangle', label: '矩形填充工具', description: '拖动绘制使用前景色填充的矩形。', shortcutId: 'tool.shape', icon: shapeRectangleFillIcon },
+  { id: 'ellipse-outline', label: '椭圆工具', description: '拖动绘制只有描边的椭圆。', shortcutId: 'tool.shape', icon: shapeEllipseIcon },
+  { id: 'ellipse', label: '椭圆填充工具', description: '拖动绘制使用前景色填充的椭圆。', shortcutId: 'tool.shape', icon: shapeEllipseFillIcon }
+]
+
+export interface ActiveToolPresentation {
+  id: ToolId
+  label: string
+  description: string
+  icon: string
+  shortcutId: ShortcutId
+}
+
+export const activeToolPresentation = (
+  toolId: ToolId,
+  selectionKind: SelectionKind,
+  shapeKind: ShapeKind
+): ActiveToolPresentation => {
+  if (toolId === 'selection') {
+    const definition = SELECTION_KIND_DEFINITIONS.find((item) => item.id === selectionKind)!
+    return { ...definition, id: toolId, icon: SELECTION_KIND_ICONS[selectionKind] }
+  }
+  if (toolId === 'shape') {
+    const definition = SHAPE_KIND_DEFINITIONS.find((item) => item.id === shapeKind)!
+    return { ...definition, id: toolId }
+  }
+  return TOOL_DEFINITIONS.find((item) => item.id === toolId)!
+}
+
 export const SELECTION_MODES = [
   { id: 'replace', label: '新建', icon: selectionReplaceIcon },
   { id: 'add', label: '加选', icon: selectionAddIcon },
@@ -45,12 +102,24 @@ export const SELECTION_MODES = [
   { id: 'intersect', label: '交集', icon: selectionIntersectIcon }
 ] as const
 
+export const temporarySelectionModeForModifiers = (shiftHeld: boolean, secondaryHeld: boolean): SelectionMode | null =>
+  secondaryHeld ? 'subtract' : shiftHeld ? 'add' : null
+
+export const ALL_EDITOR_TOOL_ICONS = [...new Set([
+  ...TOOL_DEFINITIONS.map((item) => item.icon),
+  ...Object.values(SELECTION_KIND_ICONS),
+  ...SELECTION_MODES.map((item) => item.icon),
+  ...SHAPE_KIND_DEFINITIONS.map((item) => item.icon)
+])]
+
 const pixelMasks = {
   round: ['01110', '11111', '11111', '11111', '01110'],
   square: ['11111', '11111', '11111', '11111', '11111'],
   line: ['11111'],
   rectangle: ['111111', '111111', '111111', '111111'],
-  ellipse: ['011110', '111111', '111111', '011110']
+  ellipse: ['011110', '111111', '111111', '011110'],
+  'rectangle-outline': ['111111', '100001', '100001', '111111'],
+  'ellipse-outline': ['011110', '100001', '100001', '011110']
 } as const
 
 export function PixelShapeIcon({ kind }: { kind: keyof typeof pixelMasks }) {
diff --git a/src/renderer/src/components/canvas-composite-cache.test.ts b/src/renderer/src/components/canvas-composite-cache.test.ts
index ed4cc54..6a768d1 100644
--- a/src/renderer/src/components/canvas-composite-cache.test.ts
+++ b/src/renderer/src/components/canvas-composite-cache.test.ts
@@ -3,8 +3,9 @@ import { createDocument } from '@/core/document'
 import { CanvasCompositeCache } from './canvas-composite-cache'
 
 class MockOffscreenCanvas {
+  readonly context = { putImageData: vi.fn() }
   constructor(public width: number, public height: number) {}
-  getContext() { return { putImageData: vi.fn() } }
+  getContext() { return this.context }
 }
 
 class MockImageData {
@@ -21,20 +22,20 @@ describe('CanvasCompositeCache', () => {
     vi.unstubAllGlobals()
   })
 
-  it('applies the tile transform once per draw instead of once per tile', () => {
+  it('draws a fractional-zoom canvas as one continuous surface while painting', () => {
     const context = {
       save: vi.fn(), restore: vi.fn(), beginPath: vi.fn(), rect: vi.fn(), clip: vi.fn(),
       translate: vi.fn(), scale: vi.fn(), drawImage: vi.fn(), imageSmoothingEnabled: true
     }
-    const document = createDocument('tiles', 256, 256, 'rgba')
+    const document = createDocument('continuous surface', 256, 256, 'rgba')
     new CanvasCompositeCache().draw({
       context: context as never,
       document,
-      view: { zoom: 2, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false, showGrid: false, relativeLuminance: false },
+      view: { zoom: 1.5, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false, showGrid: false, relativeLuminance: false },
       originX: 10,
       originY: 20,
-      canvasWidth: 512,
-      canvasHeight: 512,
+      canvasWidth: 384,
+      canvasHeight: 384,
       fromX: 0,
       fromY: 0,
       toX: 256,
@@ -42,10 +43,78 @@ describe('CanvasCompositeCache', () => {
       revision: 1,
       activeDrag: 'draw'
     })
-    expect(context.drawImage).toHaveBeenCalledTimes(4)
-    expect(context.translate).toHaveBeenCalledTimes(1)
-    expect(context.scale).toHaveBeenCalledTimes(1)
-    expect(context.save).toHaveBeenCalledTimes(2)
-    expect(context.restore).toHaveBeenCalledTimes(2)
+    expect(context.drawImage).toHaveBeenCalledTimes(1)
+    expect(context.drawImage).toHaveBeenCalledWith(expect.any(MockOffscreenCanvas), 10, 20, 384, 384)
+    expect(context.translate).not.toHaveBeenCalled()
+    expect(context.scale).not.toHaveBeenCalled()
+  })
+
+  it('keeps idle and drawing frames on the same continuous surface path', () => {
+    const createContext = () => ({
+      save: vi.fn(), restore: vi.fn(), beginPath: vi.fn(), rect: vi.fn(), clip: vi.fn(),
+      translate: vi.fn(), scale: vi.fn(), drawImage: vi.fn(), imageSmoothingEnabled: true
+    })
+    const document = createDocument('fractional', 64, 64, 'rgba')
+    const cache = new CanvasCompositeCache()
+    const draw = (activeDrag?: 'draw') => {
+      const context = createContext()
+      cache.draw({
+        context: context as never,
+        document,
+        view: { zoom: 3.13, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false, showGrid: false, relativeLuminance: false },
+        originX: 12.25,
+        originY: 8.75,
+        canvasWidth: 200.32,
+        canvasHeight: 200.32,
+        fromX: 0,
+        fromY: 0,
+        toX: 64,
+        toY: 64,
+        revision: 1,
+        activeDrag
+      })
+      return context
+    }
+
+    const idle = draw()
+    const drawing = draw('draw')
+
+    expect(idle.drawImage).toHaveBeenCalledTimes(1)
+    expect(drawing.drawImage).toHaveBeenCalledTimes(1)
+    expect(idle.drawImage.mock.calls[0][0]).toBe(drawing.drawImage.mock.calls[0][0])
+    expect(idle.drawImage).toHaveBeenCalledWith(expect.any(MockOffscreenCanvas), 12.25, 8.75, 200.32, 200.32)
+  })
+
+  it('patches a dirty rectangle without splitting the final display surface', () => {
+    const context = {
+      save: vi.fn(), restore: vi.fn(), beginPath: vi.fn(), rect: vi.fn(), clip: vi.fn(),
+      translate: vi.fn(), scale: vi.fn(), drawImage: vi.fn(), imageSmoothingEnabled: true
+    }
+    const document = createDocument('dirty surface', 256, 256, 'rgba')
+    const cache = new CanvasCompositeCache()
+    const options = {
+      context: context as never,
+      document,
+      view: { zoom: 1.5, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false, showGrid: false, relativeLuminance: false },
+      originX: 0,
+      originY: 0,
+      canvasWidth: 384,
+      canvasHeight: 384,
+      fromX: 0,
+      fromY: 0,
+      toX: 256,
+      toY: 256,
+      revision: 1,
+      activeDrag: 'draw' as const
+    }
+    cache.draw(options)
+    const surface = context.drawImage.mock.calls[0][0] as MockOffscreenCanvas
+
+    cache.invalidateRect({ x: 127, y: 127, width: 3, height: 3 }, document.width, document.height)
+    cache.draw(options)
+
+    expect(context.drawImage).toHaveBeenCalledTimes(2)
+    expect(context.drawImage.mock.calls[1][0]).toBe(surface)
+    expect(surface.context.putImageData).toHaveBeenLastCalledWith(expect.objectContaining({ width: 3, height: 3 }), 127, 127)
   })
 })
diff --git a/src/renderer/src/components/canvas-composite-cache.ts b/src/renderer/src/components/canvas-composite-cache.ts
index 9fc7ea0..f876e9d 100644
--- a/src/renderer/src/components/canvas-composite-cache.ts
+++ b/src/renderer/src/components/canvas-composite-cache.ts
@@ -4,17 +4,18 @@ import { applyRelativeLuminance } from '@/core/raster'
 import type { CanvasDragState } from '@/core/canvas-input'
 import type { RasterContext2D } from './canvas-selection-renderer'
 
-interface CompositeTile {
-  canvas: OffscreenCanvas
-  x: number
-  y: number
-}
-
 interface CompositeSurface {
   canvas: OffscreenCanvas
   revision: string
 }
 
+interface CompositeRegionSurface extends CompositeSurface {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
 interface DrawCompositeOptions {
   context: RasterContext2D
   document: SpriteDocument
@@ -31,45 +32,37 @@ interface DrawCompositeOptions {
   activeDrag?: CanvasDragState['kind']
 }
 
-const TILE_SIZE = 128
-const MAX_TILES = 192
 const MAX_SURFACE_PIXELS = 2048 * 2048
-const CACHE_VERSION = 2
+const CACHE_VERSION = 3
 
 export class CanvasCompositeCache {
-  private readonly tiles = new Map<string, CompositeTile>()
   private revision = ''
   private surface: CompositeSurface | null = null
+  private region: CompositeRegionSurface | null = null
+  private dirtyRects: SelectionRect[] = []
 
   invalidateSurface(): void {
     this.surface = null
+    this.region = null
+    this.dirtyRects = []
   }
 
   invalidateAll(): void {
-    this.tiles.clear()
-    this.surface = null
+    this.invalidateSurface()
   }
 
   invalidateRect(selection: SelectionRect | null | undefined, documentWidth: number, documentHeight: number): void {
     if (!selection) return
-    // Tile sources include a one-pixel gutter. Invalidate neighboring gutters
-    // so an edited edge cannot leave a stale copy in an adjacent tile.
-    const left = Math.max(0, selection.x - 1)
-    const top = Math.max(0, selection.y - 1)
-    const right = Math.min(documentWidth, selection.x + selection.width + 1)
-    const bottom = Math.min(documentHeight, selection.y + selection.height + 1)
+    const left = Math.max(0, Math.floor(selection.x))
+    const top = Math.max(0, Math.floor(selection.y))
+    const right = Math.min(documentWidth, Math.ceil(selection.x + selection.width))
+    const bottom = Math.min(documentHeight, Math.ceil(selection.y + selection.height))
     if (right <= left || bottom <= top) return
-    const firstTileX = Math.floor(left / TILE_SIZE)
-    const firstTileY = Math.floor(top / TILE_SIZE)
-    const lastTileX = Math.floor((right - 1) / TILE_SIZE)
-    const lastTileY = Math.floor((bottom - 1) / TILE_SIZE)
-    for (let tileY = firstTileY; tileY <= lastTileY; tileY += 1) {
-      for (let tileX = firstTileX; tileX <= lastTileX; tileX += 1) this.tiles.delete(`${tileX}:${tileY}`)
-    }
-    this.surface = null
+    this.dirtyRects.push({ x: left, y: top, width: right - left, height: bottom - top })
+    this.region = null
   }
 
-  draw({ context, document, view, originX, originY, canvasWidth, canvasHeight, fromX, fromY, toX, toY, revision, activeDrag }: DrawCompositeOptions): void {
+  draw({ context, document, view, originX, originY, canvasWidth, canvasHeight, fromX, fromY, toX, toY, revision }: DrawCompositeOptions): void {
     const contentRevision = `${CACHE_VERSION}:${document.id}:${revision}:${view.relativeLuminance ? 'luminance' : 'color'}`
     if (this.revision !== contentRevision) {
       this.revision = contentRevision
@@ -81,13 +74,8 @@ export class CanvasCompositeCache {
     context.rect(originX, originY, canvasWidth, canvasHeight)
     context.clip()
     context.imageSmoothingEnabled = false
-    const canUseSurface = activeDrag !== 'draw'
-      && activeDrag !== 'move-content'
-      && activeDrag !== 'transform-content'
-      && activeDrag !== 'rotate-content'
-      && document.width * document.height <= MAX_SURFACE_PIXELS
-    if (canUseSurface) this.drawSurface(context, document, view, originX, originY, canvasWidth, canvasHeight, contentRevision)
-    else this.drawTiles(context, document, view, originX, originY, fromX, fromY, toX, toY)
+    if (document.width * document.height <= MAX_SURFACE_PIXELS) this.drawSurface(context, document, view, originX, originY, canvasWidth, canvasHeight, contentRevision)
+    else this.drawRegion(context, document, view, originX, originY, fromX, fromY, toX, toY, contentRevision)
     context.restore()
   }
 
@@ -100,47 +88,40 @@ export class CanvasCompositeCache {
       canvas.getContext('2d')?.putImageData(new ImageData(new Uint8ClampedArray(pixels), document.width, document.height), 0, 0)
       surface = { canvas, revision }
       this.surface = surface
+      this.dirtyRects = []
+    } else if (this.dirtyRects.length > 0) {
+      const surfaceContext = surface.canvas.getContext('2d')
+      if (surfaceContext) for (const rect of this.dirtyRects) {
+        const pixels = compositeRegion(document, rect.x, rect.y, rect.width, rect.height)
+        if (view.relativeLuminance) applyRelativeLuminance(pixels)
+        surfaceContext.putImageData(new ImageData(new Uint8ClampedArray(pixels), rect.width, rect.height), rect.x, rect.y)
+      }
+      this.dirtyRects = []
     }
     context.drawImage(surface.canvas, originX, originY, canvasWidth, canvasHeight)
   }
 
-  private drawTiles(context: RasterContext2D, document: SpriteDocument, view: ViewState, originX: number, originY: number, fromX: number, fromY: number, toX: number, toY: number): void {
-    const firstTileX = Math.floor(fromX / TILE_SIZE)
-    const firstTileY = Math.floor(fromY / TILE_SIZE)
-    const lastTileX = Math.floor((toX - 1) / TILE_SIZE)
-    const lastTileY = Math.floor((toY - 1) / TILE_SIZE)
+  private drawRegion(context: RasterContext2D, document: SpriteDocument, view: ViewState, originX: number, originY: number, fromX: number, fromY: number, toX: number, toY: number, revision: string): void {
+    const x = Math.max(0, Math.floor(fromX))
+    const y = Math.max(0, Math.floor(fromY))
+    const right = Math.min(document.width, Math.ceil(toX))
+    const bottom = Math.min(document.height, Math.ceil(toY))
+    const width = Math.max(0, right - x)
+    const height = Math.max(0, bottom - y)
+    if (width === 0 || height === 0) return
+    let region = this.region
+    if (!region || region.revision !== revision || region.x !== x || region.y !== y || region.width !== width || region.height !== height) {
+      const pixels = compositeRegion(document, x, y, width, height)
+      if (view.relativeLuminance) applyRelativeLuminance(pixels)
+      const canvas = new OffscreenCanvas(width, height)
+      canvas.getContext('2d')?.putImageData(new ImageData(new Uint8ClampedArray(pixels), width, height), 0, 0)
+      region = { canvas, revision, x, y, width, height }
+      this.region = region
+    }
     context.save()
     context.translate(originX, originY)
     context.scale(view.zoom, view.zoom)
-    for (let tileY = firstTileY; tileY <= lastTileY; tileY += 1) {
-      for (let tileX = firstTileX; tileX <= lastTileX; tileX += 1) {
-        const startX = tileX * TILE_SIZE
-        const startY = tileY * TILE_SIZE
-        const width = Math.min(TILE_SIZE, document.width - startX)
-        const height = Math.min(TILE_SIZE, document.height - startY)
-        const key = `${tileX}:${tileY}`
-        let tile = this.tiles.get(key)
-        if (!tile) {
-          const sourceX = Math.max(0, startX - 1)
-          const sourceY = Math.max(0, startY - 1)
-          const sourceRight = Math.min(document.width, startX + width + 1)
-          const sourceBottom = Math.min(document.height, startY + height + 1)
-          const sourceWidth = sourceRight - sourceX
-          const sourceHeight = sourceBottom - sourceY
-          const pixels = compositeRegion(document, sourceX, sourceY, sourceWidth, sourceHeight)
-          if (view.relativeLuminance) applyRelativeLuminance(pixels)
-          const source = new OffscreenCanvas(sourceWidth, sourceHeight)
-          source.getContext('2d')?.putImageData(new ImageData(new Uint8ClampedArray(pixels), sourceWidth, sourceHeight), 0, 0)
-          tile = { canvas: source, x: sourceX, y: sourceY }
-          this.tiles.set(key, tile)
-          if (this.tiles.size > MAX_TILES) {
-            const oldest = this.tiles.keys().next().value
-            if (oldest !== undefined) this.tiles.delete(oldest)
-          }
-        }
-        context.drawImage(tile.canvas, tile.x, tile.y)
-      }
-    }
+    context.drawImage(region.canvas, x, y)
     context.restore()
   }
 }
diff --git a/src/renderer/src/components/canvas-selection-renderer.test.ts b/src/renderer/src/components/canvas-selection-renderer.test.ts
new file mode 100644
index 0000000..3c6c468
--- /dev/null
+++ b/src/renderer/src/components/canvas-selection-renderer.test.ts
@@ -0,0 +1,44 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { drawSelectionOutline } from './canvas-selection-renderer'
+
+class MockPath2D {
+  moveTo = vi.fn()
+  lineTo = vi.fn()
+}
+
+describe('drawSelectionOutline', () => {
+  beforeEach(() => {
+    vi.stubGlobal('Path2D', MockPath2D)
+    vi.spyOn(performance, 'now').mockReturnValue(0)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+  })
+
+  it('hides only the marching ants while keeping all transform handles', () => {
+    const context = {
+      save: vi.fn(), restore: vi.fn(), translate: vi.fn(), setLineDash: vi.fn(), stroke: vi.fn(),
+      fillRect: vi.fn(), strokeRect: vi.fn(), lineWidth: 1, lineCap: 'butt', lineJoin: 'miter',
+      lineDashOffset: 0, strokeStyle: '', fillStyle: ''
+    }
+
+    drawSelectionOutline({
+      context: context as never,
+      selection: { x: 0, y: 0, width: 2, height: 2 },
+      box: { x: 10, y: 20, width: 32, height: 32 },
+      view: { zoom: 16, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false, showGrid: false, relativeLuminance: false },
+      viewportWidth: 200,
+      viewportHeight: 200,
+      rotationIndicatorPosition: 'view',
+      cache: null,
+      showOutline: false,
+      showHandles: true
+    })
+
+    expect(context.stroke).not.toHaveBeenCalled()
+    expect(context.fillRect).toHaveBeenCalledTimes(8)
+    expect(context.strokeRect).toHaveBeenCalledTimes(8)
+  })
+})
diff --git a/src/renderer/src/components/canvas-selection-renderer.ts b/src/renderer/src/components/canvas-selection-renderer.ts
index 0f165fd..da28c8a 100644
--- a/src/renderer/src/components/canvas-selection-renderer.ts
+++ b/src/renderer/src/components/canvas-selection-renderer.ts
@@ -47,6 +47,7 @@ interface DrawSelectionOptions {
   viewportHeight: number
   rotationIndicatorPosition: RotationIndicatorPosition
   cache: SelectionBoundaryCache | null
+  showOutline?: boolean
   showHandles?: boolean
 }
 
@@ -59,6 +60,7 @@ export function drawSelectionOutline({
   viewportHeight,
   rotationIndicatorPosition,
   cache,
+  showOutline = true,
   showHandles = true
 }: DrawSelectionOptions): SelectionBoundaryCache {
   const phase = Math.floor(performance.now() / 180) % 8
@@ -101,19 +103,21 @@ export function drawSelectionOutline({
     if (nextCache.screenPaths.size > 16) nextCache.screenPaths.delete(nextCache.screenPaths.keys().next().value!)
   }
 
-  context.save()
-  context.translate(Math.round(box.x) + 0.5, Math.round(box.y) + 0.5)
-  context.lineWidth = 1
-  context.lineCap = 'butt'
-  context.lineJoin = 'miter'
-  context.setLineDash([4, 4])
-  context.lineDashOffset = -phase
-  context.strokeStyle = '#111318'
-  context.stroke(screenPath)
-  context.lineDashOffset = -(phase + 4)
-  context.strokeStyle = '#f7f7f7'
-  context.stroke(screenPath)
-  context.restore()
+  if (showOutline) {
+    context.save()
+    context.translate(Math.round(box.x) + 0.5, Math.round(box.y) + 0.5)
+    context.lineWidth = 1
+    context.lineCap = 'butt'
+    context.lineJoin = 'miter'
+    context.setLineDash([4, 4])
+    context.lineDashOffset = -phase
+    context.strokeStyle = '#111318'
+    context.stroke(screenPath)
+    context.lineDashOffset = -(phase + 4)
+    context.strokeStyle = '#f7f7f7'
+    context.stroke(screenPath)
+    context.restore()
+  }
   if (!showHandles) return nextCache
 
   const handles: Array<[SelectionHandle, number, number]> = [
diff --git a/src/renderer/src/components/dialogs/AdjustmentDialog.test.tsx b/src/renderer/src/components/dialogs/AdjustmentDialog.test.tsx
index 04fe8f3..501f540 100644
--- a/src/renderer/src/components/dialogs/AdjustmentDialog.test.tsx
+++ b/src/renderer/src/components/dialogs/AdjustmentDialog.test.tsx
@@ -1,6 +1,11 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { AdjustmentDialog } from './AdjustmentDialog'
+import { useWorkspace } from '@/store/workspace'
+import { createDocument, createLayer } from '@/core/document'
+
+beforeEach(() => useWorkspace.setState({ sessions: [], activeId: null, message: null, dialog: null }))
+afterEach(() => { cleanup(); vi.restoreAllMocks() })
 
 describe('AdjustmentDialog', () => {
   it('keeps the curve plot styling separate from toolbar icon buttons', () => {
@@ -12,4 +17,69 @@ describe('AdjustmentDialog', () => {
     expect(removeButton.querySelector('svg')).not.toHaveClass('curve-editor-plot')
     expect(screen.getByRole('tablist', { name: '曲线通道' }).children).toHaveLength(4)
   })
+
+  it('restores the preview snapshot when the global close request cancels it', () => {
+    const snapshot = { layers: [{ layerId: 'layer-1', pixels: new Uint8ClampedArray(4) }], palette: [], nextColorId: 1 }
+    const state = useWorkspace.getState()
+    const capture = vi.spyOn(state, 'captureActiveLayerAdjustmentSnapshot').mockReturnValue(snapshot)
+    const restore = vi.spyOn(state, 'restoreActiveDocumentSnapshot').mockImplementation(() => undefined)
+    vi.spyOn(state, 'previewActiveLayerAdjustment').mockImplementation(() => undefined)
+    const onClose = vi.fn()
+    render(<AdjustmentDialog kind="brightness-contrast" onClose={onClose} />)
+
+    window.dispatchEvent(new Event('moonsprite:close-dialog'))
+
+    expect(capture).toHaveBeenCalled()
+    expect(restore).toHaveBeenCalledWith(snapshot)
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('recaptures the baseline when the selection or selected layers change', async () => {
+    const document = createDocument('dynamic adjustment target', 2, 1, 'rgba')
+    const second = createLayer('Second', 2, 1, 'rgba')
+    document.layers.push(second)
+    useWorkspace.getState().addSession(document)
+    const state = useWorkspace.getState()
+    const capture = vi.spyOn(state, 'captureActiveLayerAdjustmentSnapshot')
+    render(<AdjustmentDialog kind="brightness-contrast" onClose={vi.fn()} />)
+
+    act(() => state.setSelection({ x: 0, y: 0, width: 1, height: 1 }))
+    await waitFor(() => expect(capture).toHaveBeenCalledTimes(2))
+
+    act(() => {
+      state.setSelection(null)
+      state.selectLayer(second.id, true)
+    })
+    await waitFor(() => expect(capture.mock.calls.length).toBeGreaterThanOrEqual(3))
+  })
+
+  it('exposes HSL lightness separately from hue and saturation', () => {
+    render(<AdjustmentDialog kind="hue-saturation" onClose={vi.fn()} />)
+    expect(screen.getByText('色相')).toBeInTheDocument()
+    expect(screen.getByText('饱和度')).toBeInTheDocument()
+    expect(screen.getByText('明度')).toBeInTheDocument()
+  })
+
+  it('coalesces rapid slider input into one preview per animation frame', () => {
+    const snapshot = { layers: [{ layerId: 'layer-1', pixels: new Uint8ClampedArray(4) }], palette: [], nextColorId: 1 }
+    const state = useWorkspace.getState()
+    vi.spyOn(state, 'captureActiveLayerAdjustmentSnapshot').mockReturnValue(snapshot)
+    const preview = vi.spyOn(state, 'previewActiveLayerAdjustment').mockImplementation(() => undefined)
+    let scheduled: FrameRequestCallback | null = null
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => { scheduled = callback; return 1 })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => { scheduled = null })
+    render(<AdjustmentDialog kind="brightness-contrast" onClose={vi.fn()} />)
+    act(() => { scheduled?.(0); scheduled = null })
+    preview.mockClear()
+
+    const brightness = screen.getAllByRole('slider')[0]
+    fireEvent.change(brightness, { target: { value: '10' } })
+    fireEvent.change(brightness, { target: { value: '20' } })
+    fireEvent.change(brightness, { target: { value: '30' } })
+
+    expect(preview).not.toHaveBeenCalled()
+    act(() => scheduled?.(16))
+    expect(preview).toHaveBeenCalledOnce()
+    expect(preview).toHaveBeenCalledWith(expect.objectContaining({ brightness: 30 }), snapshot)
+  })
 })
diff --git a/src/renderer/src/components/dialogs/AdjustmentDialog.tsx b/src/renderer/src/components/dialogs/AdjustmentDialog.tsx
index 9fce0cc..465aa18 100644
--- a/src/renderer/src/components/dialogs/AdjustmentDialog.tsx
+++ b/src/renderer/src/components/dialogs/AdjustmentDialog.tsx
@@ -10,6 +10,7 @@ import {
   type CurvePoint
 } from '@/core/adjustments'
 import { NumberInput } from '@/components/NumberInput'
+import { ModalShell } from '@/components/ModalShell'
 import { useWorkspace } from '@/store/workspace'
 
 function AdjustmentSlider({ label, value, min, max, onChange }: { label: string; value: number; min: number; max: number; onChange: (value: number) => void }) {
@@ -96,12 +97,21 @@ function CurveEditor({ points, channel = 'rgb', histogram, onChange }: { points:
 }
 
 export function AdjustmentDialog({ kind, onClose }: { kind: AdjustmentKind; onClose: () => void }) {
-  const [baseline] = useState(() => useWorkspace.getState().captureActiveLayerAdjustmentSnapshot())
+  const activeSelection = useWorkspace((state) => state.sessions.find((session) => session.document.id === state.activeId)?.selection ?? null)
+  const selectedLayerKey = useWorkspace((state) => {
+    const session = state.sessions.find((item) => item.document.id === state.activeId)
+    return session ? `${session.document.activeLayerId}|${session.selectedGroupId ?? ''}|${session.selectedGroupIds.join(',')}|${session.selectedLayerIds.join(',')}` : ''
+  })
+  const [baseline, setBaseline] = useState(() => useWorkspace.getState().captureActiveLayerAdjustmentSnapshot())
+  const baselineRef = useRef(baseline)
+  const initialTargetRef = useRef(true)
+  const closedRef = useRef(false)
   const [previewEnabled, setPreviewEnabled] = useState(true)
   const [brightness, setBrightness] = useState(0)
   const [contrast, setContrast] = useState(0)
   const [hue, setHue] = useState(0)
   const [saturation, setSaturation] = useState(0)
+  const [lightness, setLightness] = useState(0)
   const [curveChannel, setCurveChannel] = useState<CurveChannel>('rgb')
   const [curvePoints, setCurvePoints] = useState<Record<CurveChannel, CurvePoint[]>>({
     rgb: [{ x: 0, y: 0 }, { x: 255, y: 255 }],
@@ -111,7 +121,8 @@ export function AdjustmentDialog({ kind, onClose }: { kind: AdjustmentKind; onCl
   })
   const [balanceTone, setBalanceTone] = useState<'shadows' | 'midtones' | 'highlights'>('midtones')
   const [preserveLuminosity, setPreserveLuminosity] = useState(true)
-  const histogram = useMemo(() => baseline ? buildCurveHistogram(baseline.pixels, baseline.pixels instanceof Uint8ClampedArray ? 'rgba' : 'indexed', baseline.palette) : null, [baseline])
+  const histogramLayer = baseline?.layers[0]
+  const histogram = useMemo(() => histogramLayer ? buildCurveHistogram(histogramLayer.pixels, histogramLayer.pixels instanceof Uint8ClampedArray ? 'rgba' : 'indexed', baseline?.palette ?? []) : null, [baseline, histogramLayer])
   const [balance, setBalance] = useState({
     shadowsCyanRed: 0, shadowsMagentaGreen: 0, shadowsYellowBlue: 0,
     midtonesCyanRed: 0, midtonesMagentaGreen: 0, midtonesYellowBlue: 0,
@@ -120,36 +131,76 @@ export function AdjustmentDialog({ kind, onClose }: { kind: AdjustmentKind; onCl
   const adjustment = useMemo<ColorAdjustment>(() => kind === 'brightness-contrast'
     ? { kind, brightness, contrast }
     : kind === 'hue-saturation'
-      ? { kind, hue, saturation }
+      ? { kind, hue, saturation, lightness }
       : kind === 'curves'
         ? { kind, curvePoints: curvePoints.rgb, curveRedPoints: curvePoints.red, curveGreenPoints: curvePoints.green, curveBluePoints: curvePoints.blue }
-        : { kind, ...balance, preserveLuminosity }, [kind, brightness, contrast, hue, saturation, curvePoints, balance, preserveLuminosity])
+        : { kind, ...balance, preserveLuminosity }, [kind, brightness, contrast, hue, saturation, lightness, curvePoints, balance, preserveLuminosity])
+  const previewFrameRef = useRef<number | null>(null)
+  const latestAdjustmentRef = useRef(adjustment)
+  const previewEnabledRef = useRef(previewEnabled)
+  latestAdjustmentRef.current = adjustment
+  previewEnabledRef.current = previewEnabled
+  const cancelScheduledPreview = (): void => {
+    if (previewFrameRef.current === null) return
+    window.cancelAnimationFrame(previewFrameRef.current)
+    previewFrameRef.current = null
+  }
 
   useEffect(() => {
-    if (!baseline) return
+    if (initialTargetRef.current) { initialTargetRef.current = false; return }
+    cancelScheduledPreview()
     const workspace = useWorkspace.getState()
-    if (previewEnabled) workspace.previewActiveLayerAdjustment(adjustment, baseline)
-    else workspace.restoreActiveDocumentSnapshot(baseline)
+    if (baselineRef.current) workspace.restoreActiveDocumentSnapshot(baselineRef.current)
+    const next = workspace.captureActiveLayerAdjustmentSnapshot()
+    baselineRef.current = next
+    setBaseline(next)
+  }, [activeSelection, selectedLayerKey])
+
+  useEffect(() => {
+    if (!baseline) return
+    baselineRef.current = baseline
+    if (previewFrameRef.current !== null) return
+    previewFrameRef.current = window.requestAnimationFrame(() => {
+      previewFrameRef.current = null
+      const workspace = useWorkspace.getState()
+      if (previewEnabledRef.current) workspace.previewActiveLayerAdjustment(latestAdjustmentRef.current, baselineRef.current ?? baseline)
+      else workspace.restoreActiveDocumentSnapshot(baselineRef.current ?? baseline)
+    })
   }, [adjustment, baseline, previewEnabled])
 
   const cancel = (): void => {
-    if (baseline) useWorkspace.getState().restoreActiveDocumentSnapshot(baseline)
+    if (closedRef.current) return
+    closedRef.current = true
+    cancelScheduledPreview()
+    if (baselineRef.current) useWorkspace.getState().restoreActiveDocumentSnapshot(baselineRef.current)
     onClose()
   }
   const apply = (): void => {
-    if (baseline) useWorkspace.getState().applyActiveLayerAdjustmentFromSnapshot(adjustment, baseline)
+    if (closedRef.current) return
+    closedRef.current = true
+    cancelScheduledPreview()
+    if (baselineRef.current) useWorkspace.getState().applyActiveLayerAdjustmentFromSnapshot(latestAdjustmentRef.current, baselineRef.current)
     onClose()
   }
+  useEffect(() => {
+    const close = (event: Event): void => {
+      const target = (event as CustomEvent<{ target?: string }>).detail?.target
+      if (!target || target === 'adjustment') cancel()
+    }
+    window.addEventListener('moonsprite:close-dialog', close)
+    return () => window.removeEventListener('moonsprite:close-dialog', close)
+  })
+  useEffect(() => () => cancelScheduledPreview(), [])
   const title = kind === 'color-balance' ? '色彩平衡' : kind === 'brightness-contrast' ? '亮度/对比度' : kind === 'hue-saturation' ? '色相/饱和度' : '曲线'
   const tonePrefix = balanceTone === 'shadows' ? 'shadows' : balanceTone === 'midtones' ? 'midtones' : 'highlights'
   const updateBalance = (channel: 'CyanRed' | 'MagentaGreen' | 'YellowBlue', value: number): void => setBalance((current) => ({ ...current, [`${tonePrefix}${channel}`]: value }))
   const balanceValue = (channel: 'CyanRed' | 'MagentaGreen' | 'YellowBlue'): number => balance[`${tonePrefix}${channel}` as keyof typeof balance]
 
-  return <div className="modal-backdrop" role="presentation"><section className="modal adjustment-modal" role="dialog" aria-label={title}><header><div><span className="eyebrow">ADJUST</span><h2>{title}</h2></div><button className="icon-button" aria-label="关闭" onClick={cancel}><X size={16} /></button></header><div className="modal-body adjustment-modal-body">
+  return <div className="modal-backdrop" role="presentation"><ModalShell storageKey={`adjustment-${kind}-v3`} placement="right" defaultWidth={kind === 'curves' ? 460 : 400} defaultHeight={kind === 'curves' ? 520 : 380} minWidth={kind === 'curves' ? 420 : 350} minHeight={kind === 'curves' ? 430 : 300} maxWidth={680} maxHeight={760} className="adjustment-modal" role="dialog" aria-label={title}><header><div><span className="eyebrow">ADJUST</span><h2>{title}</h2></div><button className="icon-button" aria-label="关闭" onClick={cancel}><X size={16} /></button></header><div className="modal-body adjustment-modal-body">
     {kind === 'brightness-contrast' && <section className="adjustment-controls"><AdjustmentSlider label="亮度" min={-100} max={100} value={brightness} onChange={setBrightness} /><AdjustmentSlider label="对比度" min={-100} max={100} value={contrast} onChange={setContrast} /></section>}
-    {kind === 'hue-saturation' && <section className="adjustment-controls"><AdjustmentSlider label="色相" min={-180} max={180} value={hue} onChange={setHue} /><AdjustmentSlider label="饱和度" min={-100} max={100} value={saturation} onChange={setSaturation} /></section>}
+    {kind === 'hue-saturation' && <section className="adjustment-controls"><AdjustmentSlider label="色相" min={-180} max={180} value={hue} onChange={setHue} /><AdjustmentSlider label="饱和度" min={-100} max={100} value={saturation} onChange={setSaturation} /><AdjustmentSlider label="明度" min={-100} max={100} value={lightness} onChange={setLightness} /></section>}
     {kind === 'curves' && <section className="adjustment-controls curve-controls"><div className="curve-channel-tabs" role="tablist" aria-label="曲线通道">{(['rgb', 'red', 'green', 'blue'] as CurveChannel[]).map((channel) => <button type="button" key={channel} className={`curve-channel-${channel} ${curveChannel === channel ? 'selected' : ''}`} onClick={() => setCurveChannel(channel)}><i aria-hidden="true" />{channel === 'rgb' ? 'RGB' : channel === 'red' ? '红' : channel === 'green' ? '绿' : '蓝'}</button>)}</div><CurveEditor channel={curveChannel} histogram={histogram?.[curveChannel]} points={curvePoints[curveChannel]} onChange={(next) => setCurvePoints((current) => ({ ...current, [curveChannel]: next }))} /><button type="button" className="quiet-button curve-reset" onClick={() => setCurvePoints((current) => ({ ...current, [curveChannel]: [{ x: 0, y: 0 }, { x: 255, y: 255 }] }))}>重置当前通道</button></section>}
     {kind === 'color-balance' && <section className="balance-panel"><div className="balance-tone-tabs segmented-control"><button className={balanceTone === 'shadows' ? 'selected' : ''} onClick={() => setBalanceTone('shadows')}>阴影</button><button className={balanceTone === 'midtones' ? 'selected' : ''} onClick={() => setBalanceTone('midtones')}>中间调</button><button className={balanceTone === 'highlights' ? 'selected' : ''} onClick={() => setBalanceTone('highlights')}>高光</button></div><div className="adjustment-controls balance-controls"><AdjustmentSlider label="青色 - 红色" min={-100} max={100} value={balanceValue('CyanRed')} onChange={(value) => updateBalance('CyanRed', value)} /><AdjustmentSlider label="洋红 - 绿色" min={-100} max={100} value={balanceValue('MagentaGreen')} onChange={(value) => updateBalance('MagentaGreen', value)} /><AdjustmentSlider label="黄色 - 蓝色" min={-100} max={100} value={balanceValue('YellowBlue')} onChange={(value) => updateBalance('YellowBlue', value)} /></div><label className="tool-checkbox preserve-luminosity"><input type="checkbox" checked={preserveLuminosity} onChange={(event) => setPreserveLuminosity(event.target.checked)} />保持明度</label></section>}
     <label className="outline-preview-toggle adjustment-preview-toggle"><span className="outline-preview-label"><Eye size={15} />实时预览</span><input type="checkbox" checked={previewEnabled} onChange={(event) => setPreviewEnabled(event.target.checked)} /><span className="toggle-track" aria-hidden="true"><i /></span></label>
-  </div><footer><button className="quiet-button" onClick={cancel}>取消</button><button className="primary-button" onClick={apply}>应用</button></footer></section></div>
+  </div><footer><button className="quiet-button" onClick={cancel}>取消</button><button className="primary-button" onClick={apply}>应用</button></footer></ModalShell></div>
 }
diff --git a/src/renderer/src/components/dialogs/PreferencesDialog.test.tsx b/src/renderer/src/components/dialogs/PreferencesDialog.test.tsx
index 588c707..fe41637 100644
--- a/src/renderer/src/components/dialogs/PreferencesDialog.test.tsx
+++ b/src/renderer/src/components/dialogs/PreferencesDialog.test.tsx
@@ -1,9 +1,12 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { PreferencesDialog } from './PreferencesDialog'
+import { useWorkspace } from '@/store/workspace'
 
 afterEach(() => {
+  cleanup()
   localStorage.clear()
+  useWorkspace.setState({ dialog: null })
 })
 
 describe('PreferencesDialog', () => {
@@ -16,4 +19,61 @@ describe('PreferencesDialog', () => {
     expect(onClose).not.toHaveBeenCalled()
     expect(screen.getByRole('dialog', { name: '首选项' })).toBeInTheDocument()
   })
+
+  it('asks for confirmation before clearing local settings', async () => {
+    localStorage.setItem('test-setting', 'kept-until-confirmed')
+    render(<PreferencesDialog onClose={vi.fn()} onPresetChange={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('button', { name: '重置' }))
+    fireEvent.click(screen.getByRole('button', { name: '恢复所有初始设置' }))
+
+    await waitFor(() => expect(useWorkspace.getState().dialog?.title).toBe('恢复所有初始设置'))
+    expect(localStorage.getItem('test-setting')).toBe('kept-until-confirmed')
+    expect(useWorkspace.getState().dialog?.detail).toContain('不会删除')
+  })
+
+  it('shows selection and eyedropper preferences disabled by default', () => {
+    render(<PreferencesDialog onClose={vi.fn()} onPresetChange={vi.fn()} />)
+    fireEvent.click(screen.getByRole('button', { name: '编辑' }))
+
+    expect(screen.getByText('套索选区预览闭合').closest('label')?.querySelector('input')).not.toBeChecked()
+    expect(screen.getByText('吸管取色后切回铅笔').closest('label')?.querySelector('input')).not.toBeChecked()
+    expect(screen.getByText('直线算法优化').closest('label')?.querySelector('input')).toBeChecked()
+    fireEvent.pointerEnter(screen.getByText('直线算法优化'))
+    expect(screen.getByRole('tooltip')).toHaveTextContent('斜线像素会均匀分配为长度相近的阶梯')
+  })
+
+  it('separates system cursor behavior from tool previews', () => {
+    render(<PreferencesDialog onClose={vi.fn()} onPresetChange={vi.fn()} />)
+    fireEvent.click(screen.getByRole('button', { name: '光标' }))
+    expect(screen.getByText('使用本地指针')).toBeInTheDocument()
+    expect(screen.queryByText('笔刷预览')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: '工具预览' }))
+    expect(screen.getByText('笔刷预览')).toBeInTheDocument()
+    expect(screen.getByText('框选时显示十字指针')).toBeInTheDocument()
+  })
+
+  it('allows layer display color presets to be added and restored', () => {
+    render(<PreferencesDialog onClose={vi.fn()} onPresetChange={vi.fn()} />)
+    fireEvent.click(screen.getByRole('button', { name: '图层' }))
+
+    expect(screen.getByText('图层属性颜色预设').closest('.preference-checker-colors')).not.toBeNull()
+
+    const initialPresetCount = screen.getAllByLabelText(/图层显示颜色预设 \d+/).length
+    fireEvent.click(screen.getByRole('button', { name: '新增颜色' }))
+    expect(screen.getAllByLabelText(/图层显示颜色预设 \d+/)).toHaveLength(initialPresetCount + 1)
+    fireEvent.click(screen.getByRole('button', { name: '恢复默认颜色' }))
+    expect(screen.getAllByLabelText(/图层显示颜色预设 \d+/)).toHaveLength(initialPresetCount)
+    expect(screen.getAllByRole('button', { name: /删除图层颜色预设/ }).every((button) => button.classList.contains('regular'))).toBe(true)
+  })
+
+  it('uses the shared compact delete button for size and export presets', () => {
+    render(<PreferencesDialog onClose={vi.fn()} onPresetChange={vi.fn()} />)
+    fireEvent.click(screen.getByRole('button', { name: '预设' }))
+
+    const deleteButtons = screen.getAllByRole('button', { name: /删除/ })
+    expect(deleteButtons.length).toBeGreaterThan(0)
+    expect(deleteButtons.every((button) => button.classList.contains('delete-icon-button') && button.classList.contains('compact'))).toBe(true)
+  })
 })
diff --git a/src/renderer/src/components/dialogs/PreferencesDialog.tsx b/src/renderer/src/components/dialogs/PreferencesDialog.tsx
index f7771db..14007ea 100644
--- a/src/renderer/src/components/dialogs/PreferencesDialog.tsx
+++ b/src/renderer/src/components/dialogs/PreferencesDialog.tsx
@@ -1,10 +1,12 @@
 import { useState } from 'react'
-import { Plus, RotateCcw, Trash2, X } from 'lucide-react'
+import { Plus, RotateCcw, X } from 'lucide-react'
 import {
   DEFAULT_CHECKERBOARD_PREFERENCES,
+  DEFAULT_LAYER_DISPLAY_COLOR_PRESETS,
   loadEditorPreferences,
   parseDocumentSizePresets,
   parseExportScalePresets,
+  parseLayerDisplayColorPresets,
   saveEditorPreferences,
   type BrushPreviewMode,
   type CheckerSize,
@@ -16,36 +18,57 @@ import {
 } from '@/core/file-preferences'
 import { clearStoredValues } from '@/core/storage'
 import { ColorValueControl } from '@/components/ColorValueControl'
+import { DeleteIconButton } from '@/components/DeleteIconButton'
+import { ModalShell } from '@/components/ModalShell'
 import { NumberInput } from '@/components/NumberInput'
 import { ThemedSelect } from '@/components/ThemedSelect'
+import { Tooltip } from '@/components/Tooltip'
+import { useWorkspace } from '@/store/workspace'
 
 interface PreferencesDialogProps {
   onClose: () => void
   onPresetChange: (documentSizes: DocumentSizePreset[], exportScales: number[]) => void
 }
 
-type PreferenceSection = 'general' | 'files' | 'cursor' | 'background' | 'editing' | 'presets' | 'reset'
+type PreferenceSection = 'general' | 'files' | 'cursor' | 'toolPreview' | 'background' | 'editing' | 'layers' | 'presets' | 'reset'
 
 export function PreferencesDialog({ onClose, onPresetChange }: PreferencesDialogProps) {
   const [section, setSection] = useState<PreferenceSection>('general')
-  const [preferences, setPreferences] = useState(loadEditorPreferences)
+  const [preferences, setPreferences] = useState(() => ({ ...loadEditorPreferences(), language: 'zh-CN' as const }))
   const update = <K extends keyof typeof preferences>(key: K, value: typeof preferences[K]): void => setPreferences((current) => ({ ...current, [key]: value }))
   const updateDocumentSize = (index: number, key: keyof DocumentSizePreset, value: number): void => update('documentSizePresets', preferences.documentSizePresets.map((preset, presetIndex) => presetIndex === index ? { ...preset, [key]: value } : preset))
+  const updateLayerColorPreset = (index: number, color: typeof preferences.layerDisplayColorPresets[number]): void => update('layerDisplayColorPresets', preferences.layerDisplayColorPresets.map((preset, presetIndex) => presetIndex === index ? { ...color, a: 255 } : preset))
   const recoveryValue = preferences.recovery ? String(preferences.recoveryMinutes) : 'off'
   const persist = (): void => {
     const documentSizePresets = parseDocumentSizePresets(JSON.stringify(preferences.documentSizePresets))
     const exportScalePresets = parseExportScalePresets(JSON.stringify(preferences.exportScalePresets))
-    saveEditorPreferences({ ...preferences, documentSizePresets, exportScalePresets })
+    const layerDisplayColorPresets = parseLayerDisplayColorPresets(JSON.stringify(preferences.layerDisplayColorPresets))
+    setPreferences((current) => ({ ...current, documentSizePresets, exportScalePresets, layerDisplayColorPresets }))
+    saveEditorPreferences({ ...preferences, documentSizePresets, exportScalePresets, layerDisplayColorPresets })
     window.dispatchEvent(new Event('moonsprite:preferences-changed'))
     onPresetChange(documentSizePresets, exportScalePresets)
   }
-  const toggle = (label: string, checked: boolean, onChange: (checked: boolean) => void) => <label className="preference-toggle outline-preview-toggle"><span>{label}</span><input type="checkbox" checked={checked} onChange={(event) => onChange(event.target.checked)} /><span className="toggle-track" aria-hidden="true"><i /></span></label>
+  const resetAllSettings = async (): Promise<void> => {
+    const choice = await useWorkspace.getState().requestDialog({
+      title: '恢复所有初始设置',
+      message: '确定恢复 MoonSprite 的所有软件设置吗？',
+      detail: '将清除首选项、快捷键、工具状态、最近记录和工作区布局记录。不会删除任何用户创建的工程、笔刷、色板、工作区文件或其他磁盘文件。',
+      choices: [
+        { id: 'cancel', label: '取消', tone: 'quiet' },
+        { id: 'reset', label: '恢复所有初始设置', tone: 'danger' }
+      ]
+    })
+    if (choice !== 'reset') return
+    clearStoredValues()
+    window.location.reload()
+  }
+  const toggle = (label: string, checked: boolean, onChange: (checked: boolean) => void, tooltip?: string) => <label className="preference-toggle outline-preview-toggle"><Tooltip content={tooltip}><span>{label}</span></Tooltip><input type="checkbox" checked={checked} onChange={(event) => onChange(event.target.checked)} /><span className="toggle-track" aria-hidden="true"><i /></span></label>
 
-  return <div className="modal-backdrop" role="presentation"><section className="modal settings-modal" role="dialog" aria-label="首选项">
+  return <div className="modal-backdrop" role="presentation"><ModalShell storageKey="preferences" defaultWidth={720} defaultHeight={560} minWidth={620} minHeight={460} fitContent={false} className="settings-modal" role="dialog" aria-label="首选项">
     <header><div><span className="eyebrow">PREFERENCES</span><h2>首选项</h2></div><button className="icon-button" aria-label="关闭" onClick={onClose}><X size={16} /></button></header>
-    <div className="settings-layout"><nav>{([['general', '常规'], ['files', '文件'], ['cursor', '光标'], ['background', '背景'], ['editing', '编辑'], ['presets', '预设'], ['reset', '重置']] as Array<[PreferenceSection, string]>).map(([id, label]) => <button key={id} className={section === id ? 'selected' : ''} onClick={() => setSection(id)}>{label}</button>)}</nav><main>
+    <div className="settings-layout"><nav>{([['general', '常规'], ['files', '文件'], ['cursor', '光标'], ['toolPreview', '工具预览'], ['background', '背景'], ['editing', '编辑'], ['layers', '图层'], ['presets', '预设'], ['reset', '重置']] as Array<[PreferenceSection, string]>).map(([id, label]) => <button key={id} className={section === id ? 'selected' : ''} onClick={() => setSection(id)}>{label}</button>)}</nav><main>
       {section === 'general' && <>
-        <label className="preference-field">语言<ThemedSelect value={preferences.language} groups={[{ label: '语言', options: [{ value: 'zh-CN', label: '简体中文' }, { value: 'en-US', label: 'English' }] }]} label="语言" onChange={(value) => update('language', value)} /></label>
+        <div className="preference-field"><span>语言</span><span className="preference-static-value">简体中文</span></div>
         <label className="preference-field">旋转指向标位置<ThemedSelect value={preferences.rotationIndicatorPosition} groups={[{ label: '位置', options: [{ value: 'view', label: '视图中心' }, { value: 'canvas', label: '画布中心' }] }]} label="旋转指向标位置" onChange={(value) => update('rotationIndicatorPosition', value as RotationIndicatorPosition)} /></label>
         <label className="preference-field">默认缩放模式<ThemedSelect value={preferences.zoomToolDragMode} groups={[{ label: '缩放方式', options: [{ value: 'smooth', label: '平滑缩放' }, { value: 'stepped', label: '百分比缩放' }] }]} label="默认缩放模式" onChange={(value) => update('zoomToolDragMode', value as ZoomToolDragMode)} /></label>
         <label className="preference-field">查看相对明暗作用区域<ThemedSelect value={preferences.relativeLuminanceScope} groups={[{ label: '作用区域', options: [{ value: 'canvas', label: '画布视图内' }, { value: 'app', label: '整体（整个软件）' }] }]} label="查看相对明暗作用区域" onChange={(value) => update('relativeLuminanceScope', value as RelativeLuminanceScope)} /></label>
@@ -56,10 +79,13 @@ export function PreferencesDialog({ onClose, onPresetChange }: PreferencesDialog
         <label className="preference-field">自动保存恢复数据<ThemedSelect value={recoveryValue} groups={[{ label: '保存间隔', options: [{ value: 'off', label: '关闭' }, { value: '0.5', label: '每 30 秒' }, { value: '1', label: '每 1 分钟' }, { value: '2', label: '每 2 分钟' }, { value: '5', label: '每 5 分钟' }, { value: '10', label: '每 10 分钟' }] }]} label="自动保存恢复数据" onChange={(value) => setPreferences((current) => value === 'off' ? { ...current, recovery: false } : { ...current, recovery: true, recoveryMinutes: Number(value) })} /></label>
       </>}
       {section === 'cursor' && <>
-        {toggle('优先使用本地鼠标指针（缺失时使用软件指针）', preferences.useLocalCursors, (value) => update('useLocalCursors', value))}
+        {toggle('使用本地指针', preferences.useLocalCursors, (value) => update('useLocalCursors', value), '开启后优先使用电脑系统指针；系统没有对应指针的特殊操作仍使用 MoonSprite 指针。')}
         <label className="preference-field">鼠标光标比例<ThemedSelect value={String(preferences.cursorScale)} groups={[{ label: '光标比例', options: [{ value: '1', label: '100%' }, { value: '1.25', label: '125%' }, { value: '1.5', label: '150%' }, { value: '2', label: '200%' }] }]} label="鼠标光标比例" onChange={(value) => update('cursorScale', Number(value) as CursorScale)} /></label>
+      </>}
+      {section === 'toolPreview' && <>
         <label className="preference-field">笔刷预览<ThemedSelect value={preferences.brushPreviewMode} groups={[{ label: '预览样式', options: [{ value: 'none', label: '无' }, { value: 'edge', label: '仅显示边缘' }, { value: 'full', label: '完整预览' }, { value: 'full-edge', label: '完整预览并显示边缘' }] }]} label="笔刷预览" onChange={(value) => update('brushPreviewMode', value as BrushPreviewMode)} /></label>
         {toggle('绘制期间保持笔刷预览', preferences.drawingBrushPreviewEnabled, (value) => update('drawingBrushPreviewEnabled', value))}
+        {toggle('框选时显示十字指针', preferences.selectionCrosshair, (value) => update('selectionCrosshair', value))}
       </>}
       {section === 'background' && <>
         <label className="preference-field">透明背景格大小<ThemedSelect value={String(preferences.checkerboard.size)} groups={[{ label: '格子大小', options: [{ value: '4', label: '小（4 px）' }, { value: '8', label: '较小（8 px）' }, { value: '16', label: '中等（16 px）' }, { value: '32', label: '大（32 px）' }] }]} label="透明背景格大小" onChange={(value) => update('checkerboard', { ...preferences.checkerboard, size: Number(value) as CheckerSize })} /></label>
@@ -68,10 +94,17 @@ export function PreferencesDialog({ onClose, onPresetChange }: PreferencesDialog
       {section === 'editing' && <>
         {toggle('使用滚轮缩放', preferences.wheelZoomEnabled, (value) => update('wheelZoomEnabled', value))}
         {toggle('实时显示铅笔直线预览', preferences.shiftLinePreviewEnabled, (value) => update('shiftLinePreviewEnabled', value))}
+        {toggle('直线算法优化', preferences.balancedShiftLineEnabled, (value) => update('balancedShiftLineEnabled', value), '启用后，斜线像素会均匀分配为长度相近的阶梯，使线条节奏更规整。')}
+        {toggle('套索选区预览闭合', preferences.lassoPreviewClosed, (value) => update('lassoPreviewClosed', value))}
+        {toggle('吸管取色后切回铅笔', preferences.eyedropperSwitchToPencil, (value) => update('eyedropperSwitchToPencil', value))}
       </>}
-      {section === 'presets' && <div className="preference-presets"><section><header><strong>新建工程尺寸</strong><button type="button" onClick={() => update('documentSizePresets', [...preferences.documentSizePresets, { width: 64, height: 64 }])}><Plus size={13} />新增尺寸</button></header><div className="preference-preset-grid">{preferences.documentSizePresets.map((preset, index) => <div className="document-size-preset-row" key={index}><NumberInput aria-label={`预设 ${index + 1} 宽度`} min={1} max={16384} suffix="px" value={preset.width} onValueChange={(value) => updateDocumentSize(index, 'width', value)} /><span>x</span><NumberInput aria-label={`预设 ${index + 1} 高度`} min={1} max={16384} suffix="px" value={preset.height} onValueChange={(value) => updateDocumentSize(index, 'height', value)} /><button type="button" className="icon-button" aria-label={`删除尺寸 ${preset.width}x${preset.height}`} disabled={preferences.documentSizePresets.length === 1} onClick={() => update('documentSizePresets', preferences.documentSizePresets.filter((_, presetIndex) => presetIndex !== index))}><Trash2 size={13} /></button></div>)}</div></section><section><header><strong>导出图片放大倍数</strong><button type="button" onClick={() => update('exportScalePresets', [...preferences.exportScalePresets, 100])}><Plus size={13} />新增倍数</button></header><div className="preference-preset-grid export-scale-preset-grid">{preferences.exportScalePresets.map((scale, index) => <div className="export-scale-preset-row" key={index}><NumberInput aria-label={`导出倍数 ${index + 1}`} min={1} max={6400} suffix="%" value={scale} onValueChange={(value) => update('exportScalePresets', preferences.exportScalePresets.map((currentScale, scaleIndex) => scaleIndex === index ? value : currentScale))} /><button type="button" className="icon-button" aria-label={`删除 ${scale}%`} disabled={preferences.exportScalePresets.length === 1} onClick={() => update('exportScalePresets', preferences.exportScalePresets.filter((_, scaleIndex) => scaleIndex !== index))}><Trash2 size={13} /></button></div>)}</div></section></div>}
-      {section === 'reset' && <><p>重置会清空本地工作区、工具、调色盘和快捷键设置，当前打开的工程文件不会删除。</p><button className="danger-button" onClick={() => { clearStoredValues(); window.location.reload() }}>恢复所有初始设置</button></>}
+      {section === 'layers' && <div className="preference-checker-colors preference-layer-colors">
+        <div className="preference-checker-color-heading"><span>图层属性颜色预设</span><div><button type="button" className="quiet-button" aria-label="恢复默认颜色" onClick={() => update('layerDisplayColorPresets', DEFAULT_LAYER_DISPLAY_COLOR_PRESETS.map((color) => ({ ...color })))}><RotateCcw size={13} />恢复默认</button><button type="button" className="quiet-button" disabled={preferences.layerDisplayColorPresets.length >= 12} onClick={() => update('layerDisplayColorPresets', [...preferences.layerDisplayColorPresets, { r: 117, g: 117, b: 117, a: 255 }])}><Plus size={13} />新增颜色</button></div></div>
+        <div className="preference-layer-color-grid">{preferences.layerDisplayColorPresets.map((color, index) => <div className="preference-layer-color-row" key={index}><ColorValueControl color={color} onChange={(value) => updateLayerColorPreset(index, value)} label={`图层显示颜色预设 ${index + 1}`} storageKey="layer-preset" /><DeleteIconButton size="regular" aria-label={`删除图层颜色预设 ${index + 1}`} disabled={preferences.layerDisplayColorPresets.length === 1} onClick={() => update('layerDisplayColorPresets', preferences.layerDisplayColorPresets.filter((_, presetIndex) => presetIndex !== index))} /></div>)}</div>
+      </div>}
+      {section === 'presets' && <div className="preference-presets"><section><header><strong>新建工程尺寸</strong><button type="button" onClick={() => update('documentSizePresets', [...preferences.documentSizePresets, { width: 64, height: 64 }])}><Plus size={13} />新增尺寸</button></header><div className="preference-preset-grid">{preferences.documentSizePresets.map((preset, index) => <div className="document-size-preset-row" key={index}><NumberInput aria-label={`预设 ${index + 1} 宽度`} min={1} max={16384} suffix="px" value={preset.width} onValueChange={(value) => updateDocumentSize(index, 'width', value)} /><span>x</span><NumberInput aria-label={`预设 ${index + 1} 高度`} min={1} max={16384} suffix="px" value={preset.height} onValueChange={(value) => updateDocumentSize(index, 'height', value)} /><DeleteIconButton aria-label={`删除尺寸 ${preset.width}x${preset.height}`} disabled={preferences.documentSizePresets.length === 1} onClick={() => update('documentSizePresets', preferences.documentSizePresets.filter((_, presetIndex) => presetIndex !== index))} /></div>)}</div></section><section><header><strong>导出图片放大倍数</strong><button type="button" onClick={() => update('exportScalePresets', [...preferences.exportScalePresets, 100])}><Plus size={13} />新增倍数</button></header><div className="preference-preset-grid export-scale-preset-grid">{preferences.exportScalePresets.map((scale, index) => <div className="export-scale-preset-row" key={index}><NumberInput aria-label={`导出倍数 ${index + 1}`} min={1} max={6400} suffix="%" value={scale} onValueChange={(value) => update('exportScalePresets', preferences.exportScalePresets.map((currentScale, scaleIndex) => scaleIndex === index ? value : currentScale))} /><DeleteIconButton aria-label={`删除 ${scale}%`} disabled={preferences.exportScalePresets.length === 1} onClick={() => update('exportScalePresets', preferences.exportScalePresets.filter((_, scaleIndex) => scaleIndex !== index))} /></div>)}</div></section></div>}
+      {section === 'reset' && <><p>重置只清除软件配置记录。用户创建的工程、笔刷、色板、工作区文件和其他磁盘文件不会删除。</p><button className="danger-button" onClick={() => void resetAllSettings()}>恢复所有初始设置</button></>}
     </main></div>
     <footer><button className="quiet-button" onClick={onClose}>取消</button><button className="quiet-button" onClick={persist}>应用</button><button className="primary-button" onClick={() => { persist(); onClose() }}>确定</button></footer>
-  </section></div>
+  </ModalShell></div>
 }
diff --git a/src/renderer/src/components/dialogs/SaveAsDialog.test.tsx b/src/renderer/src/components/dialogs/SaveAsDialog.test.tsx
new file mode 100644
index 0000000..c221feb
--- /dev/null
+++ b/src/renderer/src/components/dialogs/SaveAsDialog.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { SaveAsDialog } from './SaveAsDialog'
+
+describe('SaveAsDialog', () => {
+  it('uses the configured initial format and warns for flattened images', () => {
+    render(<SaveAsDialog initialName="sprite" initialFormat="png-auto" onSave={vi.fn(async () => true)} onClose={vi.fn()} />)
+
+    expect(screen.getByRole('button', { name: '保存格式' })).toHaveTextContent('PNG 自动索引')
+    expect(screen.getByText(/不会保留图层和工程结构/)).toBeInTheDocument()
+  })
+})
diff --git a/src/renderer/src/components/dialogs/SaveAsDialog.tsx b/src/renderer/src/components/dialogs/SaveAsDialog.tsx
index a9981a7..7e77776 100644
--- a/src/renderer/src/components/dialogs/SaveAsDialog.tsx
+++ b/src/renderer/src/components/dialogs/SaveAsDialog.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Save, X } from 'lucide-react'
 import { ThemedSelect } from '@/components/ThemedSelect'
+import { ModalShell } from '@/components/ModalShell'
 import type { SaveAsOptions } from '@/store/workspace'
 
 const saveAsFormatOptions: Array<{ value: SaveAsOptions['format']; label: string }> = [
@@ -15,12 +16,13 @@ const saveAsFormatOptions: Array<{ value: SaveAsOptions['format']; label: string
 
 interface SaveAsDialogProps {
   initialName: string
+  initialFormat: SaveAsOptions['format']
   onSave: (options: SaveAsOptions) => Promise<boolean>
   onClose: () => void
 }
 
-export function SaveAsDialog({ initialName, onSave, onClose }: SaveAsDialogProps) {
-  const [form, setForm] = useState<SaveAsOptions>({ name: initialName, format: 'moonsprite', scalePercent: 100 })
+export function SaveAsDialog({ initialName, initialFormat, onSave, onClose }: SaveAsDialogProps) {
+  const [form, setForm] = useState<SaveAsOptions>({ name: initialName, format: initialFormat, scalePercent: 100 })
   const [saving, setSaving] = useState(false)
   const submit = async (): Promise<void> => {
     if (!form.name.trim() || saving) return
@@ -31,5 +33,6 @@ export function SaveAsDialog({ initialName, onSave, onClose }: SaveAsDialogProps
       setSaving(false)
     }
   }
-  return <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget && !saving) onClose() }}><form className="modal save-as-modal" onSubmit={(event) => { event.preventDefault(); void submit() }}><header><div><span className="eyebrow">SAVE AS</span><h2>另存为</h2></div><button type="button" className="icon-button" aria-label="关闭" disabled={saving} onClick={onClose}><X size={16} /></button></header><div className="modal-body"><label>文件名称<input autoFocus value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} /></label><label>格式<ThemedSelect value={form.format} groups={[{ label: '保存格式', options: saveAsFormatOptions }]} label="保存格式" onChange={(format) => setForm({ ...form, format })} /></label></div><footer><button type="button" className="quiet-button" disabled={saving} onClick={onClose}>取消</button><button type="submit" className="primary-button" disabled={saving || !form.name.trim()}><Save size={15} />保存</button></footer></form></div>
+  const flattened = form.format === 'png-auto' || form.format === 'png-rgba' || form.format === 'jpeg' || form.format === 'webp'
+  return <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget && !saving) onClose() }}><ModalShell as="form" storageKey="save-as" defaultWidth={400} defaultHeight={300} className="save-as-modal" onSubmit={(event) => { event.preventDefault(); void submit() }}><header><div><span className="eyebrow">SAVE AS</span><h2>另存为</h2></div><button type="button" className="icon-button" aria-label="关闭" disabled={saving} onClick={onClose}><X size={16} /></button></header><div className="modal-body"><label>文件名称<input autoFocus value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} /></label><label>格式<ThemedSelect value={form.format} groups={[{ label: '保存格式', options: saveAsFormatOptions }]} label="保存格式" onChange={(format) => setForm({ ...form, format })} /></label>{flattened && <p className="modal-note save-as-format-warning">图片格式不会保留图层和工程结构，后续编辑建议同时保存 MoonSprite 或 Aseprite 工程。</p>}</div><footer><button type="button" className="quiet-button" disabled={saving} onClick={onClose}>取消</button><button type="submit" className="primary-button" disabled={saving || !form.name.trim()}><Save size={15} />保存</button></footer></ModalShell></div>
 }
diff --git a/src/renderer/src/components/dialogs/ShortcutDialog.test.tsx b/src/renderer/src/components/dialogs/ShortcutDialog.test.tsx
new file mode 100644
index 0000000..278d674
--- /dev/null
+++ b/src/renderer/src/components/dialogs/ShortcutDialog.test.tsx
@@ -0,0 +1,34 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { DEFAULT_SHORTCUTS } from '@/core/shortcuts'
+import { ShortcutDialog } from './ShortcutDialog'
+
+afterEach(cleanup)
+
+describe('ShortcutDialog', () => {
+  it('waits for an ordinary key before saving a multi-modifier shortcut', () => {
+    const onSave = vi.fn()
+    render(<ShortcutDialog shortcuts={{ ...DEFAULT_SHORTCUTS }} onSave={onSave} onClose={vi.fn()} />)
+    const pencil = screen.getByDisplayValue('B')
+
+    fireEvent.keyDown(pencil, { key: 'Control', code: 'ControlLeft', ctrlKey: true })
+    expect(pencil).toHaveValue('Ctrl')
+    fireEvent.keyDown(pencil, { key: 'Shift', code: 'ShiftLeft', ctrlKey: true, shiftKey: true })
+    expect(pencil).toHaveValue('Ctrl+Shift')
+    fireEvent.keyDown(pencil, { key: 'm', code: 'KeyM', ctrlKey: true, shiftKey: true })
+    expect(pencil).toHaveValue('Ctrl+Shift+M')
+
+    fireEvent.click(screen.getByRole('button', { name: '完成' }))
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ 'tool.pencil': 'Ctrl+Shift+M' }))
+  })
+
+  it('records Ctrl+Shift+V inside the dedicated recorder instead of invoking app commands', () => {
+    render(<ShortcutDialog shortcuts={{ ...DEFAULT_SHORTCUTS }} onSave={vi.fn()} onClose={vi.fn()} />)
+    const pencil = screen.getByDisplayValue('B')
+
+    expect(pencil).toHaveAttribute('data-shortcut-recorder', 'true')
+    fireEvent.keyDown(pencil, { key: 'v', code: 'KeyV', ctrlKey: true, shiftKey: true })
+
+    expect(pencil).toHaveValue('Ctrl+Shift+V')
+  })
+})
diff --git a/src/renderer/src/components/dialogs/ShortcutDialog.tsx b/src/renderer/src/components/dialogs/ShortcutDialog.tsx
index 4d72d5f..98b99ae 100644
--- a/src/renderer/src/components/dialogs/ShortcutDialog.tsx
+++ b/src/renderer/src/components/dialogs/ShortcutDialog.tsx
@@ -8,6 +8,7 @@ import {
   deriveShortcutConflicts,
   shortcutText
 } from '@/core/shortcuts'
+import { ModalShell } from '@/components/ModalShell'
 
 const defaultShortcuts: Record<string, string> = { ...DEFAULT_SHORTCUTS }
 
@@ -18,28 +19,46 @@ interface ShortcutDialogProps {
 }
 
 export function ShortcutDialog({ shortcuts, onSave, onClose }: ShortcutDialogProps) {
+  const [draftShortcuts, setDraftShortcuts] = useState<Record<string, string>>(() => ({ ...shortcuts }))
   const [section, setSection] = useState<keyof typeof SHORTCUT_GROUPS>('tools')
   const [query, setQuery] = useState('')
   const [importError, setImportError] = useState<string | null>(null)
+  const [recording, setRecording] = useState<{ id: string; text: string } | null>(null)
   const importInputRef = useRef<HTMLInputElement>(null)
-  const conflictState = useMemo(() => deriveShortcutConflicts(shortcuts), [shortcuts])
-  const active = SHORTCUT_GROUPS[section].filter((id) => SHORTCUT_LABELS[id].toLowerCase().includes(query.toLowerCase()) || (shortcuts[id] ?? defaultShortcuts[id]).toLowerCase().includes(query.toLowerCase()))
+  const conflictState = useMemo(() => deriveShortcutConflicts(draftShortcuts), [draftShortcuts])
+  const active = SHORTCUT_GROUPS[section].filter((id) => SHORTCUT_LABELS[id].toLowerCase().includes(query.toLowerCase()) || (draftShortcuts[id] ?? defaultShortcuts[id]).toLowerCase().includes(query.toLowerCase()))
   const assign = (id: string, value: string): void => {
     const normalized = value.trim()
     setImportError(null)
-    onSave({ ...shortcuts, [id]: normalized })
+    setDraftShortcuts((current) => ({ ...current, [id]: normalized }))
+  }
+  const finishRecording = (id: string): void => {
+    if (recording?.id !== id) return
+    assign(id, recording.text)
+    setRecording(null)
   }
   const importShortcuts = async (file: File | undefined): Promise<void> => {
     if (!file) return
     try {
       const parsed = JSON.parse(await file.text()) as Record<string, unknown>
       const imported = Object.fromEntries(Object.entries(parsed).filter(([key, value]) => key in defaultShortcuts && typeof value === 'string')) as Record<string, string>
-      onSave({ ...defaultShortcuts, ...imported })
+      setDraftShortcuts({ ...defaultShortcuts, ...imported })
       setImportError(null)
     } catch {
       setImportError('快捷键文件无法读取，请选择 MoonSprite 导出的 JSON 文件。')
     }
   }
   const conflictSummary = conflictState.conflicts.map((item) => `“${item.shortcut}”：${SHORTCUT_LABELS[item.winner]} 优先，${item.conflicting.map((id) => SHORTCUT_LABELS[id]).join('、')}无法触发`).join('；')
-  return <div className="modal-backdrop" role="presentation"><section className="modal settings-modal" role="dialog" aria-label="快捷键设置"><header><div><span className="eyebrow">SHORTCUTS</span><h2>快捷键设置</h2></div><button className="icon-button" aria-label="关闭" onClick={onClose}><X size={16} /></button></header><div className="settings-layout"><nav>{Object.keys(SHORTCUT_GROUPS).map((id) => <button key={id} className={section === id ? 'selected' : ''} onClick={() => setSection(id as keyof typeof SHORTCUT_GROUPS)}>{SHORTCUT_GROUP_LABELS[id as keyof typeof SHORTCUT_GROUPS]}</button>)}</nav><main><input className="shortcut-search" placeholder="搜索快捷键" value={query} onChange={(event) => setQuery(event.target.value)} />{importError && <p className="shortcut-conflict">{importError}</p>}{conflictSummary && <p className="shortcut-conflict">{conflictSummary}</p>}<div className="shortcut-list">{active.map((id) => { const winner = conflictState.blocked[id]; return <label key={id} className={winner ? 'shortcut-blocked' : ''}><span>{SHORTCUT_LABELS[id]}</span>{winner && <span className="shortcut-warning" title={`与“${SHORTCUT_LABELS[winner]}”冲突，当前无法触发`}><TriangleAlert size={15} /></span>}<input value={shortcuts[id] ?? defaultShortcuts[id]} placeholder="未设置" readOnly onKeyDown={(event) => { event.preventDefault(); if (event.key === 'Backspace' || event.key === 'Delete') assign(id, ''); else if (event.key !== 'Escape') assign(id, shortcutText(event.nativeEvent)) }} /><button type="button" className="shortcut-clear" title="清除快捷键" aria-label={`清除 ${SHORTCUT_LABELS[id]} 快捷键`} onClick={() => assign(id, '')}><X size={13} /></button></label> })}</div></main></div><footer><input ref={importInputRef} hidden type="file" accept="application/json,.json" onChange={(event) => { void importShortcuts(event.target.files?.[0]); event.currentTarget.value = '' }} /><button className="quiet-button" onClick={() => importInputRef.current?.click()}><FileUp size={14} />导入</button><button className="quiet-button" onClick={() => { const blob = new Blob([JSON.stringify(shortcuts, null, 2)], { type: 'application/json' }); const anchor = document.createElement('a'); anchor.href = URL.createObjectURL(blob); anchor.download = 'moonsprite-shortcuts.json'; anchor.click(); URL.revokeObjectURL(anchor.href) }}>导出</button><button className="quiet-button" onClick={() => onSave({ ...defaultShortcuts })}>重置</button><button className="primary-button" onClick={onClose}>完成</button></footer></section></div>
+  return <div className="modal-backdrop" role="presentation"><ModalShell storageKey="shortcuts" defaultWidth={760} defaultHeight={600} className="settings-modal" role="dialog" aria-label="快捷键设置"><header><div><span className="eyebrow">SHORTCUTS</span><h2>快捷键设置</h2></div><button className="icon-button" aria-label="关闭" onClick={onClose}><X size={16} /></button></header><div className="settings-layout"><nav>{Object.keys(SHORTCUT_GROUPS).map((id) => <button key={id} className={section === id ? 'selected' : ''} onClick={() => setSection(id as keyof typeof SHORTCUT_GROUPS)}>{SHORTCUT_GROUP_LABELS[id as keyof typeof SHORTCUT_GROUPS]}</button>)}</nav><main><input className="shortcut-search" placeholder="搜索快捷键" value={query} onChange={(event) => setQuery(event.target.value)} />{importError && <p className="shortcut-conflict">{importError}</p>}{conflictSummary && <p className="shortcut-conflict">{conflictSummary}</p>}<div className="shortcut-list">{active.map((id) => { const winner = conflictState.blocked[id]; return <label key={id} className={winner ? 'shortcut-blocked' : ''}><span>{SHORTCUT_LABELS[id]}</span>{winner && <span className="shortcut-warning" title={`与“${SHORTCUT_LABELS[winner]}”冲突，当前无法触发`}><TriangleAlert size={15} /></span>}<input data-shortcut-recorder="true" value={recording?.id === id ? recording.text : draftShortcuts[id] ?? defaultShortcuts[id]} placeholder="未设置" readOnly onKeyDown={(event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (event.key === 'Backspace' || event.key === 'Delete') { assign(id, ''); setRecording(null); return }
+    if (event.key === 'Escape') { setRecording(null); return }
+    const text = shortcutText(event.nativeEvent)
+    if (['Control', 'Meta', 'Alt', 'Shift'].includes(event.key)) setRecording({ id, text })
+    else { assign(id, text); setRecording(null) }
+  }} onKeyUp={(event) => {
+    if (recording?.id !== id || !['Control', 'Meta', 'Alt', 'Shift'].includes(event.key)) return
+    if (!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) finishRecording(id)
+  }} onBlur={() => finishRecording(id)} /><button type="button" className="shortcut-clear" title="清除快捷键" aria-label={`清除 ${SHORTCUT_LABELS[id]} 快捷键`} onClick={() => { assign(id, ''); setRecording(null) }}><X size={13} /></button></label> })}</div></main></div><footer><input ref={importInputRef} hidden type="file" accept="application/json,.json" onChange={(event) => { void importShortcuts(event.target.files?.[0]); event.currentTarget.value = '' }} /><button className="quiet-button" onClick={() => importInputRef.current?.click()}><FileUp size={14} />导入</button><button className="quiet-button" onClick={() => { const blob = new Blob([JSON.stringify(draftShortcuts, null, 2)], { type: 'application/json' }); const anchor = document.createElement('a'); anchor.href = URL.createObjectURL(blob); anchor.download = 'moonsprite-shortcuts.json'; anchor.click(); URL.revokeObjectURL(anchor.href) }}>导出</button><button className="quiet-button" onClick={() => setDraftShortcuts({ ...defaultShortcuts })}>重置</button><button className="primary-button" onClick={() => { onSave(draftShortcuts); onClose() }}>完成</button></footer></ModalShell></div>
 }
diff --git a/src/renderer/src/components/floating-panel.tsx b/src/renderer/src/components/floating-panel.tsx
index aac4057..5164747 100644
--- a/src/renderer/src/components/floating-panel.tsx
+++ b/src/renderer/src/components/floating-panel.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react'
+import type { CSSProperties, PointerEvent as ReactPointerEvent, RefObject } from 'react'
 import { loadFloatingPosition, saveFloatingPosition, type FloatingPosition } from '@/core/panel-preferences'
 
 let floatingZIndex = 40
@@ -8,6 +8,7 @@ let floatingZIndex = 40
 export type PanelDock = 'right' | 'left' | 'bottom' | 'floating'
 export type FixedPanelDock = Exclude<PanelDock, 'floating'>
 export type ResizeDirection = 'n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw'
+export interface FloatingSizeConstraints { minWidth?: number; minHeight?: number; maxWidth?: number; maxHeight?: number }
 
 interface PanelDockZone {
   dock: FixedPanelDock
@@ -50,9 +51,21 @@ export function panelDockZoneAt(clientX: number, clientY: number): PanelDockZone
   return null
 }
 
-export function useFloatingPanel(initialPosition: FloatingPosition | null = null, followViewportRight = false, canDock = true, storageKey?: string, responsiveToViewport = false, onDock?: (dock: FixedPanelDock) => void, forceDocked = false) {
+export function useFloatingPanel(initialPosition: FloatingPosition | null = null, followViewportRight = false, canDock = true, storageKey?: string, responsiveToViewport = false, onDock?: (dock: FixedPanelDock) => void, forceDocked = false, constraints: FloatingSizeConstraints = {}) {
+  const minimumWidth = constraints.minWidth ?? 180
+  const minimumHeight = constraints.minHeight ?? 120
+  const maximumWidth = (): number => Math.max(minimumWidth, Math.min(constraints.maxWidth ?? window.innerWidth, window.innerWidth - 6))
+  const maximumHeight = (): number => Math.max(minimumHeight, Math.min(constraints.maxHeight ?? window.innerHeight, window.innerHeight - 6))
   const ref = useRef<HTMLElement>(null)
-  const [position, setPosition] = useState<FloatingPosition | null>(() => loadFloatingPosition(storageKey, initialPosition, { width: window.innerWidth, height: window.innerHeight }, responsiveToViewport, forceDocked))
+  const [position, setPosition] = useState<FloatingPosition | null>(() => {
+    const loaded = loadFloatingPosition(storageKey, initialPosition, { width: window.innerWidth, height: window.innerHeight }, responsiveToViewport, forceDocked)
+    if (!loaded) return null
+    return {
+      ...loaded,
+      width: loaded.width === undefined ? undefined : Math.max(minimumWidth, Math.min(maximumWidth(), loaded.width)),
+      height: loaded.height === undefined ? undefined : Math.max(minimumHeight, Math.min(maximumHeight(), loaded.height))
+    }
+  })
   const [zIndex, setZIndex] = useState(() => ++floatingZIndex)
   const [dockPreview, setDockPreview] = useState<CSSProperties | null>(null)
   const dockTargetRef = useRef<FixedPanelDock | null>(null)
@@ -82,16 +95,14 @@ export function useFloatingPanel(initialPosition: FloatingPosition | null = null
         const start = panelResize.current
         const deltaX = event.clientX - start.startX
         const deltaY = event.clientY - start.startY
-        const minimumWidth = 180
-        const minimumHeight = 120
         let x = start.x
         let y = start.y
         let width = start.width
         let height = start.height
-        if (start.direction.includes('e')) width = Math.max(minimumWidth, Math.min(window.innerWidth - start.x, start.width + deltaX))
-        if (start.direction.includes('s')) height = Math.max(minimumHeight, Math.min(window.innerHeight - start.y, start.height + deltaY))
-        if (start.direction.includes('w')) { width = Math.max(minimumWidth, Math.min(start.x + start.width, start.width - deltaX)); x = start.x + start.width - width }
-        if (start.direction.includes('n')) { height = Math.max(minimumHeight, Math.min(start.y + start.height, start.height - deltaY)); y = start.y + start.height - height }
+        if (start.direction.includes('e')) width = Math.max(minimumWidth, Math.min(maximumWidth(), window.innerWidth - start.x, start.width + deltaX))
+        if (start.direction.includes('s')) height = Math.max(minimumHeight, Math.min(maximumHeight(), window.innerHeight - start.y, start.height + deltaY))
+        if (start.direction.includes('w')) { width = Math.max(minimumWidth, Math.min(maximumWidth(), start.x + start.width, start.width - deltaX)); x = start.x + start.width - width }
+        if (start.direction.includes('n')) { height = Math.max(minimumHeight, Math.min(maximumHeight(), start.y + start.height, start.height - deltaY)); y = start.y + start.height - height }
         updatePosition(() => ({ x, y, width, height }))
         return
       }
@@ -127,8 +138,8 @@ export function useFloatingPanel(initialPosition: FloatingPosition | null = null
         if (!current) return current
         const scaleX = responsiveToViewport ? window.innerWidth / viewportRef.current.width : 1
         const scaleY = responsiveToViewport ? window.innerHeight / viewportRef.current.height : 1
-        const width = Math.max(180, Math.min(window.innerWidth, (current.width ?? 220) * scaleX))
-        const height = Math.max(120, Math.min(window.innerHeight, (current.height ?? 130) * scaleY))
+        const width = Math.max(minimumWidth, Math.min(maximumWidth(), (current.width ?? minimumWidth) * scaleX))
+        const height = Math.max(minimumHeight, Math.min(maximumHeight(), (current.height ?? minimumHeight) * scaleY))
         const x = responsiveToViewport ? current.x * scaleX : followViewportRight && !userPositioned.current ? window.innerWidth - initialRightOffset.current : current.x
         const y = responsiveToViewport ? current.y * scaleY : current.y
         viewportRef.current = { width: window.innerWidth, height: window.innerHeight }
@@ -145,7 +156,7 @@ export function useFloatingPanel(initialPosition: FloatingPosition | null = null
 
   useEffect(() => {
     const panel = ref.current
-    if (!panel || !position) return
+    if (!panel || !position || typeof ResizeObserver === 'undefined') return
     const observer = new ResizeObserver(() => {
       const bounds = panel.getBoundingClientRect()
       updatePosition((current) => {
@@ -198,7 +209,7 @@ export function useFloatingPanel(initialPosition: FloatingPosition | null = null
     let nextPosition: FloatingPosition | null = null
     updatePosition((current) => {
       if (!current) return current
-      nextPosition = { ...current, width: Math.max(180, Math.min(window.innerWidth - current.x, width)), height: Math.max(120, Math.min(window.innerHeight - current.y, height)) }
+      nextPosition = { ...current, width: Math.max(minimumWidth, Math.min(maximumWidth(), window.innerWidth - current.x, width)), height: Math.max(minimumHeight, Math.min(maximumHeight(), window.innerHeight - current.y, height)) }
       return nextPosition
     })
     if (nextPosition) persistPosition(nextPosition)
@@ -211,6 +222,41 @@ export function PanelResizeHandles({ onResize }: { onResize: (event: ReactPointe
   return <>{(['n', 'e', 's', 'w', 'ne', 'nw', 'se', 'sw'] as ResizeDirection[]).map((direction) => <span key={direction} className={`floating-resize-handle resize-${direction}`} aria-hidden="true" onPointerDown={(event) => onResize(event, direction)} />)}</>
 }
 
+interface PortalResizeHandlesProps {
+  onResize: (event: ReactPointerEvent<HTMLElement>, direction: ResizeDirection) => void
+  position: CSSProperties | undefined
+  targetRef: RefObject<HTMLElement | null>
+}
+
+export function PortalResizeHandles({ onResize, position, targetRef }: PortalResizeHandlesProps) {
+  const [bounds, setBounds] = useState<{ left: number; top: number; width: number; height: number } | null>(null)
+
+  useEffect(() => {
+    const target = targetRef.current
+    if (!target) return
+    const sync = (): void => {
+      const next = target.getBoundingClientRect()
+      setBounds((current) => current && current.left === next.left && current.top === next.top && current.width === next.width && current.height === next.height
+        ? current
+        : { left: next.left, top: next.top, width: next.width, height: next.height })
+    }
+    sync()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(sync)
+    observer.observe(target)
+    return () => observer.disconnect()
+  }, [position?.left, position?.top, position?.width, position?.height, targetRef])
+
+  if (!bounds) return null
+  const zIndex = typeof position?.zIndex === 'number' ? position.zIndex + 1 : 220
+  return createPortal(
+    <div className="floating-resize-portal" style={{ left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height, zIndex }} aria-hidden="true">
+      <PanelResizeHandles onResize={onResize} />
+    </div>,
+    document.body
+  )
+}
+
 export function FloatingDockPreview({ style }: { style: CSSProperties | null }) {
   return style ? createPortal(<div className="inspector-dock-preview" style={style} aria-hidden="true" />, document.body) : null
 }
diff --git a/src/renderer/src/components/panels/LayersPanel.test.tsx b/src/renderer/src/components/panels/LayersPanel.test.tsx
new file mode 100644
index 0000000..4203d72
--- /dev/null
+++ b/src/renderer/src/components/panels/LayersPanel.test.tsx
@@ -0,0 +1,182 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createDocument, createLayer, getActiveLayer } from '@/core/document'
+import { buildLayerPanelTree } from '@/core/layer-panel-layout'
+import { useWorkspace } from '@/store/workspace'
+import { LayersPanel } from './LayersPanel'
+
+beforeEach(() => {
+  localStorage.clear()
+  useWorkspace.setState({ sessions: [], activeId: null, message: null, dialog: null })
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('LayersPanel properties', () => {
+  it('commits the previewed properties and closes on Enter', () => {
+    const document = createDocument('layer properties', 2, 2, 'rgba')
+    const layer = getActiveLayer(document)
+    useWorkspace.getState().addSession(document)
+    const session = useWorkspace.getState().sessions[0]
+    render(<LayersPanel session={session} docked />)
+
+    fireEvent.doubleClick(screen.getByRole('button', { name: new RegExp(layer.name) }))
+    const nameInput = screen.getByDisplayValue(layer.name)
+    fireEvent.change(nameInput, { target: { value: '已确认名称' } })
+    fireEvent.keyDown(nameInput, { key: 'Enter' })
+
+    expect(layer.name).toBe('已确认名称')
+    expect(screen.queryByDisplayValue('已确认名称')).not.toBeInTheDocument()
+    expect(document.dirty).toBe(true)
+  })
+
+  it('does not open properties when the visibility control is double-clicked', () => {
+    const document = createDocument('layer visibility', 2, 2, 'rgba')
+    useWorkspace.getState().addSession(document)
+    const session = useWorkspace.getState().sessions[0]
+    render(<LayersPanel session={session} docked />)
+
+    fireEvent.doubleClick(screen.getByRole('button', { name: '隐藏图层' }))
+
+    expect(screen.queryByRole('heading', { name: '图层属性' })).not.toBeInTheDocument()
+  })
+
+  it('opens locked layer properties while disabling visual controls', () => {
+    const document = createDocument('locked layer properties', 2, 2, 'rgba')
+    const layer = getActiveLayer(document)
+    layer.locked = true
+    useWorkspace.getState().addSession(document)
+    render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+
+    fireEvent.doubleClick(screen.getByRole('button', { name: new RegExp(layer.name) }))
+
+    expect(screen.getByDisplayValue(layer.name)).toBeEnabled()
+    expect(screen.getByRole('button', { name: '混合模式' })).toBeDisabled()
+    expect(screen.getByRole('slider', { name: '不透明度' })).toBeDisabled()
+  })
+
+  it('replaces a multi-layer selection on an ordinary click', () => {
+    const document = createDocument('replace layer selection', 2, 2, 'rgba')
+    const first = getActiveLayer(document)
+    const second = createLayer('Second', 2, 2, 'rgba')
+    document.layers.push(second)
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().selectLayer(first.id)
+    useWorkspace.getState().selectLayer(second.id, 'toggle')
+    render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+
+    fireEvent.pointerDown(screen.getByRole('button', { name: new RegExp(first.name) }), { button: 0, clientX: 20, clientY: 20 })
+
+    expect(useWorkspace.getState().sessions[0].selectedLayerIds).toEqual([first.id])
+  })
+
+  it('includes a group row when Shift extends the visible selection range', () => {
+    const document = createDocument('group range panel', 2, 2, 'rgba')
+    const bottom = getActiveLayer(document)
+    const member = createLayer('Member', 2, 2, 'rgba')
+    member.groupId = 'group'
+    document.layers.push(member)
+    document.groups.push({ id: 'group', name: 'Group', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    useWorkspace.getState().addSession(document)
+    render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+
+    fireEvent.pointerDown(screen.getByRole('button', { name: /Group/ }), { button: 0, clientX: 20, clientY: 20 })
+    fireEvent.pointerDown(screen.getByRole('button', { name: new RegExp(bottom.name) }), { button: 0, shiftKey: true, clientX: 20, clientY: 80 })
+
+    expect(useWorkspace.getState().sessions[0].selectedGroupIds).toEqual(['group'])
+  })
+
+  it('does not show merge or ungroup actions in the panel header', () => {
+    const document = createDocument('compact layer header', 2, 2, 'rgba')
+    useWorkspace.getState().addSession(document)
+    const { container } = render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+    const header = container.querySelector('.layers-panel > header')!
+
+    expect(header.querySelector('[aria-label="向下合并"]')).not.toBeInTheDocument()
+    expect(header.querySelector('[aria-label="解组"]')).not.toBeInTheDocument()
+  })
+
+  it('shows an unlocked icon for an unlocked group', () => {
+    const document = createDocument('group lock icon', 2, 2, 'rgba')
+    document.groups.push({ id: 'group', name: 'Group', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    useWorkspace.getState().addSession(document)
+    render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+
+    const lockButton = screen.getByRole('button', { name: '锁定图层组' })
+    expect(lockButton.querySelector('.lucide-lock-open')).toBeInTheDocument()
+    expect(lockButton.querySelector('.lucide-lock')).not.toBeInTheDocument()
+  })
+
+  it('keeps realtime property edits when the close button is used', () => {
+    const document = createDocument('layer close', 2, 2, 'rgba')
+    const layer = getActiveLayer(document)
+    useWorkspace.getState().addSession(document)
+    render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+
+    fireEvent.doubleClick(screen.getByRole('button', { name: new RegExp(layer.name) }))
+    fireEvent.change(screen.getByDisplayValue(layer.name), { target: { value: '关闭仍保存' } })
+    fireEvent.click(screen.getByRole('button', { name: '关闭' }))
+
+    expect(layer.name).toBe('关闭仍保存')
+    expect(document.dirty).toBe(true)
+    useWorkspace.getState().undo()
+    expect(layer.name).not.toBe('关闭仍保存')
+  })
+
+  it.each(['解除图层锁定', '锁定图层'] as const)('does not open properties when the %s control is double-clicked', (label) => {
+    const document = createDocument('layer lock', 2, 2, 'rgba')
+    getActiveLayer(document).locked = label === '解除图层锁定'
+    useWorkspace.getState().addSession(document)
+    render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+
+    fireEvent.doubleClick(screen.getByRole('button', { name: label }))
+
+    expect(screen.queryByRole('heading', { name: '图层属性' })).not.toBeInTheDocument()
+  })
+
+  it('shows the top edge indicator and places a layer above an anchored group', () => {
+    const document = createDocument('layer top edge', 2, 2, 'rgba')
+    const member = getActiveLayer(document)
+    const root = createLayer('根图层', 2, 2, 'rgba')
+    member.groupId = 'anchored'
+    document.layers.push(root)
+    document.groups.push({ id: 'anchored', name: '锚定组', parentGroupId: null, panelOrder: 2, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    useWorkspace.getState().addSession(document)
+    const { container } = render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+    const list = container.querySelector<HTMLElement>('.layer-list')!
+    const rootRow = container.querySelector<HTMLElement>(`[data-layer-id="${root.id}"]`)!
+    Object.defineProperty(list, 'getBoundingClientRect', { value: () => ({ left: 0, right: 300, top: 100, bottom: 400, width: 300, height: 300, x: 0, y: 100, toJSON: () => ({}) }) })
+    Object.defineProperty(rootRow, 'getBoundingClientRect', { value: () => ({ left: 0, right: 300, top: 180, bottom: 222, width: 300, height: 42, x: 0, y: 180, toJSON: () => ({}) }) })
+
+    fireEvent.pointerDown(rootRow, { button: 0, clientX: 150, clientY: 200 })
+    fireEvent.pointerMove(window, { clientX: 150, clientY: 104 })
+    expect(container.querySelector('.layer-edge-drop-indicator.top')).toBeInTheDocument()
+    fireEvent.pointerUp(window, { clientX: 150, clientY: 104 })
+
+    expect(buildLayerPanelTree(document).map((node) => node.id)).toEqual([root.id, 'anchored', member.id])
+    expect(container.querySelector('.layer-edge-drop-indicator')).not.toBeInTheDocument()
+  })
+
+  it('uses the lower edge of the last root group as the root bottom target', () => {
+    const document = createDocument('layer bottom edge', 2, 2, 'rgba')
+    const root = getActiveLayer(document)
+    document.groups.push({ id: 'bottom-group', name: 'Bottom Group', parentGroupId: null, panelOrder: -1, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    useWorkspace.getState().addSession(document)
+    const { container } = render(<LayersPanel session={useWorkspace.getState().sessions[0]} docked />)
+    const list = container.querySelector<HTMLElement>('.layer-list')!
+    const rootRow = container.querySelector<HTMLElement>(`[data-layer-id="${root.id}"]`)!
+    const groupRow = container.querySelector<HTMLElement>('[data-group-id="bottom-group"]')!
+    Object.defineProperty(list, 'getBoundingClientRect', { value: () => ({ left: 0, right: 300, top: 100, bottom: 400, width: 300, height: 300, x: 0, y: 100, toJSON: () => ({}) }) })
+    Object.defineProperty(rootRow, 'getBoundingClientRect', { value: () => ({ left: 0, right: 300, top: 120, bottom: 162, width: 300, height: 42, x: 0, y: 120, toJSON: () => ({}) }) })
+    Object.defineProperty(groupRow, 'getBoundingClientRect', { value: () => ({ left: 0, right: 300, top: 180, bottom: 222, width: 300, height: 42, x: 0, y: 180, toJSON: () => ({}) }) })
+
+    fireEvent.pointerDown(rootRow, { button: 0, clientX: 150, clientY: 140 })
+    fireEvent.pointerMove(window, { clientX: 150, clientY: 220 })
+    expect(container.querySelector('.layer-edge-drop-indicator.bottom')).toBeInTheDocument()
+    fireEvent.pointerUp(window, { clientX: 150, clientY: 220 })
+
+    expect(buildLayerPanelTree(document).map((node) => node.id)).toEqual(['bottom-group', root.id])
+  })
+})
diff --git a/src/renderer/src/components/panels/LayersPanel.tsx b/src/renderer/src/components/panels/LayersPanel.tsx
index 872ff92..4b36c6f 100644
--- a/src/renderer/src/components/panels/LayersPanel.tsx
+++ b/src/renderer/src/components/panels/LayersPanel.tsx
@@ -3,31 +3,24 @@ import { Combine, Copy, Eye, EyeOff, Folder, FolderMinus, FolderOpen, FolderPlus
 import type { BlendMode, LayerGroup, RasterLayer, RgbaColor } from '@shared/types'
 import { FloatingDockPreview, PanelResizeHandles, useFloatingPanel } from '@/components/floating-panel'
 import { ColorValueControl } from '@/components/ColorValueControl'
+import { ModalShell } from '@/components/ModalShell'
 import { NumberInput } from '@/components/NumberInput'
 import { TextAreaInput } from '@/components/TextAreaInput'
 import { ThemedSelect, type ThemedSelectGroup } from '@/components/ThemedSelect'
 import { Tooltip } from '@/components/Tooltip'
 import type { DockDragProps } from '@/components/workspace-panel-types'
-import { getLayerIdsInGroup } from '@/core/document'
-import { buildLayerPanelTree, resolveLayerPanelDropTarget, type LayerPanelNode } from '@/core/layer-panel-layout'
+import { getDescendantGroupIds, getGroupLockingAncestor, getLayerIdsInGroup, getLayerLockingGroup, isGroupEffectivelyLocked, isLayerEffectivelyLocked } from '@/core/document'
+import { buildLayerPanelTree, resolveLayerPanelDropTarget, resolveLayerPanelEdgeDropTarget, type LayerPanelNode } from '@/core/layer-panel-layout'
+import { loadEditorPreferences } from '@/core/file-preferences'
 import { useWorkspace, type DocumentSession } from '@/store/workspace'
 
 interface LayerFormState { id: string; kind: 'layer' | 'group'; name: string; opacity: number; blendMode: BlendMode; locked: boolean; displayColor: RgbaColor | null; description: string }
 interface LayerDragState { ids: string[]; groupId?: string; startX: number; startY: number; moved: boolean; copy: boolean }
-type DropTarget = { kind: 'layer'; id: string; insertAfter?: boolean; depth: number } | { kind: 'group'; id: string; depth: number } | { kind: 'above-group'; id: string; insertAfter?: boolean; depth: number } | { kind: 'root' }
+type DropTarget = { kind: 'layer'; id: string; insertAfter?: boolean; depth: number } | { kind: 'group'; id: string; depth: number } | { kind: 'above-group'; id: string; insertAfter?: boolean; depth: number } | { kind: 'edge'; edge: 'top' | 'bottom' }
 interface LayerContextMenu { kind: 'layer' | 'group'; id: string; x: number; y: number }
 interface LayerDragGhost { y: number; name: string; count: number }
 type LayerTreeNode = LayerPanelNode & ({ kind: 'layer'; layer: RasterLayer } | { kind: 'group'; group: LayerGroup })
 const defaultLayerDisplayColor: RgbaColor = { r: 41, g: 121, b: 255, a: 255 }
-const layerDisplayColorPresets: RgbaColor[] = [
-  { r: 239, g: 83, b: 80, a: 255 },
-  { r: 255, g: 167, b: 38, a: 255 },
-  { r: 253, g: 216, b: 53, a: 255 },
-  { r: 102, g: 187, b: 106, a: 255 },
-  { r: 38, g: 198, b: 218, a: 255 },
-  { r: 41, g: 121, b: 255, a: 255 },
-  { r: 171, g: 71, b: 188, a: 255 }
-]
 const sameColor = (left: RgbaColor | null, right: RgbaColor | null): boolean => left === null || right === null
   ? left === right
   : left.r === right.r && left.g === right.g && left.b === right.b && left.a === right.a
@@ -71,6 +64,7 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
   const store = useWorkspace.getState()
   const floating = useFloatingPanel(null, false, true, 'moonsprite.layers-panel.v1', false, onFloatingDock, docked)
   const [form, setForm] = useState<LayerFormState | null>(null)
+  const [layerDisplayColorPresets, setLayerDisplayColorPresets] = useState(() => loadEditorPreferences().layerDisplayColorPresets)
   const formOriginalRef = useRef<LayerFormState | null>(null)
   const formWasDirtyRef = useRef(false)
   const dragRef = useRef<LayerDragState | null>(null)
@@ -99,6 +93,11 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
     window.addEventListener('resize', close)
     return () => { window.removeEventListener('pointerdown', close); window.removeEventListener('resize', close) }
   }, [])
+  useEffect(() => {
+    const refreshPresets = (): void => setLayerDisplayColorPresets(loadEditorPreferences().layerDisplayColorPresets)
+    window.addEventListener('moonsprite:preferences-changed', refreshPresets)
+    return () => window.removeEventListener('moonsprite:preferences-changed', refreshPresets)
+  }, [])
   useEffect(() => {
     const syncAltCopy = (active: boolean): void => {
       if (altCopyReadyRef.current === active) return
@@ -122,7 +121,10 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
     return () => { window.removeEventListener('keydown', keyDown); window.removeEventListener('keyup', keyUp); window.removeEventListener('pointermove', pointerMove); window.removeEventListener('blur', blur) }
   }, [])
   useEffect(() => {
-    const close = (): void => closeProperties()
+    const close = (event: Event): void => {
+      const target = (event as CustomEvent<{ target?: string }>).detail?.target
+      if (!target || target === 'layers') closeProperties()
+    }
     window.addEventListener('moonsprite:close-dialog', close)
     return () => window.removeEventListener('moonsprite:close-dialog', close)
   })
@@ -155,8 +157,13 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
         : active.document.layers.find((layer) => layer.id === next.id)
       if (!target) return
       target.name = next.name
-      target.opacity = Math.max(0, Math.min(1, next.opacity / 100))
-      target.blendMode = next.blendMode
+      const visualLocked = next.kind === 'group'
+        ? isGroupEffectivelyLocked(active.document, target as LayerGroup)
+        : isLayerEffectivelyLocked(active.document, target as RasterLayer)
+      if (!visualLocked) {
+        target.opacity = Math.max(0, Math.min(1, next.opacity / 100))
+        target.blendMode = next.blendMode
+      }
       target.locked = next.locked
       if (next.displayColor) target.displayColor = { ...next.displayColor }
       else delete target.displayColor
@@ -209,23 +216,33 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
   }, [form])
   const beginLayerDrag = (event: React.PointerEvent<HTMLButtonElement>, layerId: string): void => {
     if (event.button !== 0) return
-    if (event.shiftKey || session.selectedGroupId || session.selectedLayerIds.length !== 1 || !session.selectedLayerIds.includes(layerId)) store.selectLayer(layerId, event.shiftKey)
+    if (event.ctrlKey) store.selectLayer(layerId, 'toggle')
+    else if (event.shiftKey) store.selectLayer(layerId, 'range')
+    else if (session.selectedGroupIds.length > 0 || session.selectedLayerIds.length > 1 || !session.selectedLayerIds.includes(layerId)) store.selectLayer(layerId)
     const active = useWorkspace.getState().sessions.find((item) => item.document.id === session.document.id)
     const ids = active?.selectedLayerIds.includes(layerId) ? [...active.selectedLayerIds] : [layerId]
+    if (ids.some((id) => { const layer = session.document.layers.find((candidate) => candidate.id === id); return Boolean(layer && isLayerEffectivelyLocked(session.document, layer)) })) return
     dragRef.current = { ids, startX: event.clientX, startY: event.clientY, moved: false, copy: event.altKey }
     event.preventDefault()
   }
   const beginGroupDrag = (event: React.PointerEvent<HTMLButtonElement>, groupId: string): void => {
     if (event.button !== 0) return
-    store.selectGroup(groupId)
+    if (event.ctrlKey) store.selectGroup(groupId, 'toggle')
+    else if (event.shiftKey) store.selectGroup(groupId, 'range')
+    else if (session.selectedGroupIds.length > 1 || session.selectedLayerIds.length > 0 || !session.selectedGroupIds.includes(groupId)) store.selectGroup(groupId)
     const ids = getLayerIdsInGroup(session.document, groupId)
+    const groupIds = new Set([groupId, ...getDescendantGroupIds(session.document, groupId)])
+    if (session.document.groups.some((group) => groupIds.has(group.id) && isGroupEffectivelyLocked(session.document, group)) || ids.some((id) => { const layer = session.document.layers.find((candidate) => candidate.id === id); return Boolean(layer && isLayerEffectivelyLocked(session.document, layer)) })) return
     dragRef.current = { ids, groupId, startX: event.clientX, startY: event.clientY, moved: false, copy: false }
     event.preventDefault()
   }
   const resolveDropTarget = (clientX: number, clientY: number, draggedIds: string[], draggedGroupId?: string): DropTarget | null => {
     const list = layerListRef.current
     const listBounds = list?.getBoundingClientRect()
-    if (!list || !listBounds || clientX < listBounds.left || clientX > listBounds.right || clientY < listBounds.top || clientY > listBounds.bottom) return null
+    if (!list || !listBounds) return null
+    const edgeTarget = resolveLayerPanelEdgeDropTarget(clientY, listBounds.top, listBounds.bottom)
+    if (edgeTarget) return edgeTarget
+    if (clientX < listBounds.left || clientX > listBounds.right) return null
     const element = [...list.querySelectorAll<HTMLElement>('[data-layer-id], [data-group-id]')]
       .find((row) => {
         const bounds = row.getBoundingClientRect()
@@ -234,27 +251,32 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
     const layerId = element?.dataset.layerId
     const groupId = element?.dataset.groupId
     if (element && (layerId || groupId)) {
+      const elementBounds = element.getBoundingClientRect()
+      if (!draggedGroupId && groupId) {
+        const group = session.document.groups.find((candidate) => candidate.id === groupId)
+        const nodeIndex = nodes.findIndex((node) => node.kind === 'group' && node.id === groupId)
+        const hasFollowingRootNode = nodes.slice(nodeIndex + 1).some((node) => node.depth === 0)
+        const lowerEdge = Math.min(8, (elementBounds.bottom - elementBounds.top) * 0.2)
+        if (!group?.parentGroupId && !hasFollowingRootNode && clientY >= elementBounds.bottom - lowerEdge) return { kind: 'edge', edge: 'bottom' }
+      }
       const hit = {
         kind: layerId ? 'layer' as const : 'group' as const,
         id: (layerId ?? groupId)!,
-        top: element.getBoundingClientRect().top,
-        bottom: element.getBoundingClientRect().bottom,
+        top: elementBounds.top,
+        bottom: elementBounds.bottom,
         pointerY: clientY
       }
       const target = resolveLayerPanelDropTarget({ layers: session.document.layers, groups: session.document.groups, nodes, hit, draggedLayerIds: draggedIds, draggedGroupId })
       if (target) return target
     }
-    if (draggedGroupId) return { kind: 'root' }
-    const rows = [...list.querySelectorAll<HTMLElement>('[data-layer-id]')].filter((row) => !draggedIds.includes(row.dataset.layerId ?? ''))
-    if (rows.length === 0) return { kind: 'root' }
+    const rows = [...list.querySelectorAll<HTMLElement>('[data-layer-id], [data-group-id]')].filter((row) => !draggedIds.includes(row.dataset.layerId ?? '') && row.dataset.groupId !== draggedGroupId)
+    if (rows.length === 0) return null
     const first = rows[0].getBoundingClientRect()
     const last = rows.at(-1)!.getBoundingClientRect()
     if (clientY <= first.top) {
-      const targetId = rows[0].dataset.layerId!
-      const targetNode = nodes.find((node) => node.kind === 'layer' && node.layer.id === targetId)
-      return { kind: 'layer', id: targetId, insertAfter: true, depth: targetNode?.depth ?? 0 }
+      return { kind: 'edge', edge: 'top' }
     }
-    if (clientY >= last.bottom) return { kind: 'root' }
+    if (clientY >= last.bottom) return { kind: 'edge', edge: 'bottom' }
     return null
   }
   const moveLayerDrag = (clientX: number, clientY: number, altKey: boolean): void => {
@@ -284,8 +306,8 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
         const copies = store.duplicateLayers(drag.ids)
         if (copies.length > 0) drag.ids = copies
       }
-      if (target.kind === 'root' && drag.groupId) store.assignGroupToRoot(drag.groupId)
-      else if (target.kind === 'root') store.assignLayersToRoot(drag.ids)
+      if (target.kind === 'edge' && drag.groupId) store.moveGroupToRootEdge(drag.groupId, target.edge)
+      else if (target.kind === 'edge') store.moveLayersToRootEdge(drag.ids, target.edge)
       else if (target.kind === 'above-group') {
         if (drag.groupId) store.reorderGroup(drag.groupId, target.id, target.insertAfter)
         else store.assignLayersAboveGroup(drag.ids, target.id)
@@ -295,8 +317,7 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
       else if (!drag.ids.includes(target.id)) {
         const targetLayer = session.document.layers.find((layer) => layer.id === target.id)
         if (drag.groupId && targetLayer && !targetLayer.groupId) {
-          store.assignGroupToRoot(drag.groupId)
-          store.reorderLayers(drag.ids, target.id, target.insertAfter)
+          store.positionGroupNextToLayer(drag.groupId, target.id, target.insertAfter)
         } else {
         const draggedAcrossContainers = targetLayer && drag.ids.some((id) => (session.document.layers.find((layer) => layer.id === id)?.groupId ?? null) !== (targetLayer.groupId ?? null))
         if (targetLayer?.groupId && draggedAcrossContainers) store.assignLayersToGroup(drag.ids, targetLayer.groupId, target.id, target.insertAfter)
@@ -331,7 +352,7 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
     event.preventDefault()
     event.stopPropagation()
     if (kind === 'layer' && !session.selectedLayerIds.includes(id)) store.selectLayer(id)
-    if (kind === 'group' && session.selectedGroupId !== id) store.selectGroup(id)
+    if (kind === 'group' && !session.selectedGroupIds.includes(id)) store.selectGroup(id)
     setContextMenu({ kind, id, x: Math.min(event.clientX, window.innerWidth - 210), y: Math.min(event.clientY, window.innerHeight - 360) })
   }
   const closeContextMenu = (): void => setContextMenu(null)
@@ -346,31 +367,42 @@ export function LayersPanel({ session, docked = false, onDockDragStart, onPanelC
     }
     closeContextMenu()
   }
-  const mergeCurrent = (): void => {
-    if (session.selectedGroupId) store.mergeSelectedGroup()
-    else if (session.selectedLayerIds.length > 1) store.mergeSelectedLayers()
-    else store.mergeActiveLayerDown()
-  }
-  const mergeCurrentLabel = session.selectedGroupId ? '合并图层组' : session.selectedLayerIds.length > 1 ? '合并所选图层' : '向下合并'
-
-  return <><section ref={floating.ref} className={`panel layers-panel ${floating.style ? 'floating-panel' : ''} ${altCopyReady ? 'layer-alt-copy-ready' : ''} ${draggingCopy ? 'layer-copy-drag' : ''}`} style={floating.style} onPointerDown={floating.bringToFront} onContextMenu={onPanelContextMenu}>
-    <header onPointerDown={(event) => floating.style ? floating.startDrag(event) : onDockDragStart?.(event, floating.startDetachedDrag)}><Layers2 size={15} /><span>图层</span><span className="panel-actions"><button title="新建图层" aria-label="新建图层" onClick={() => void store.addLayer()}><Plus size={14} /></button><button title="新建图层组 Ctrl+G" aria-label="新建图层组" onClick={() => store.createLayerGroup()}><FolderPlus size={14} /></button><button title={mergeCurrentLabel} aria-label={mergeCurrentLabel} onClick={mergeCurrent}><Combine size={14} /></button><button title="解组 Ctrl+Shift+G" aria-label="解组" onClick={() => store.ungroupSelected()}><FolderMinus size={14} /></button><button title="删除图层" aria-label="删除图层" onClick={() => store.deleteActiveLayer()}><Trash2 size={14} /></button></span></header>
-    <div ref={layerListRef} className="layer-list" onContextMenu={(event) => { const target = (event.target as HTMLElement).closest<HTMLElement>('[data-layer-id], [data-group-id]'); if (target?.dataset.layerId) openLayerContextMenu(event, 'layer', target.dataset.layerId); else if (target?.dataset.groupId) openLayerContextMenu(event, 'group', target.dataset.groupId) }}>{nodes.map((node) => {
+  return <><section ref={floating.ref} className={`panel layers-panel ${floating.style ? 'floating-panel' : ''} ${altCopyReady ? 'layer-alt-copy-ready' : ''} ${draggingCopy ? 'layer-copy-drag' : ''}`} data-command-scope="layers" style={floating.style} onPointerDown={floating.bringToFront} onContextMenu={onPanelContextMenu}>
+    <header onPointerDown={(event) => floating.style ? floating.startDrag(event) : onDockDragStart?.(event, floating.startDetachedDrag)}><Layers2 size={15} /><span>图层</span><span className="panel-actions"><button title="新建图层" aria-label="新建图层" onClick={() => void store.addLayer()}><Plus size={14} /></button><button title="新建图层组 Ctrl+G" aria-label="新建图层组" onClick={() => store.createLayerGroup()}><FolderPlus size={14} /></button><button title="删除所选图层" aria-label="删除所选图层" onClick={() => store.deleteSelectedLayers()}><Trash2 size={14} /></button></span></header>
+    <div ref={layerListRef} className="layer-list" onPointerDown={(event) => { if (event.target === event.currentTarget) store.clearLayerSelection() }} onContextMenu={(event) => { const target = (event.target as HTMLElement).closest<HTMLElement>('[data-layer-id], [data-group-id]'); if (target?.dataset.layerId) openLayerContextMenu(event, 'layer', target.dataset.layerId); else if (target?.dataset.groupId) openLayerContextMenu(event, 'group', target.dataset.groupId) }}>{nodes.map((node) => {
       if (node.kind === 'group') {
         const collapsed = session.collapsedGroupIds.includes(node.group.id)
+        const lockingAncestor = getGroupLockingAncestor(session.document, node.group)
         const groupIndicator = (dropTarget?.kind === 'group' || dropTarget?.kind === 'above-group') && dropTarget.id === node.group.id
-          ? <span className={`layer-drop-indicator ${dropTarget.kind === 'above-group' ? (dropTarget.insertAfter === false ? 'below' : 'above') : 'below inside-group'}`} style={{ left: `${8 + dropTarget.depth * 14}px` }} aria-hidden="true"><i /><b /><i /></span>
+          ? <span className={`layer-drop-indicator ${dropTarget.kind === 'above-group' ? (dropTarget.insertAfter === false ? 'below' : 'above') : 'below inside-group'}`} style={{ left: `${8 + (dropTarget.kind === 'group' ? node.depth + 1 : node.depth) * 14}px` }} aria-hidden="true"><i /><b /><i /></span>
           : null
-        return <button key={node.group.id} data-group-id={node.group.id} className={`layer-row group-row ${node.group.id === session.selectedGroupId ? 'selected' : ''} ${draggingGroupId === node.group.id ? 'dragging' : ''} ${groupIndicator ? 'group-drop-target' : ''}`} style={{ '--layer-depth': node.depth } as React.CSSProperties} onPointerDown={(event) => beginGroupDrag(event, node.group.id)} onDoubleClick={() => editGroup(node.group)}>{groupIndicator}{node.group.displayColor && <span className="layer-color-stripe" style={{ backgroundColor: `rgba(${node.group.displayColor.r}, ${node.group.displayColor.g}, ${node.group.displayColor.b}, ${node.group.displayColor.a / 255})` }} aria-hidden="true" />}<span className="layer-visibility" role="button" tabIndex={-1} aria-label={node.group.visible ? '隐藏图层组' : '显示图层组'} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); store.toggleGroupVisibility(node.group.id) }}>{node.group.visible ? <Eye size={14} /> : <EyeOff size={14} />}</span><span className={`layer-lock-toggle ${node.group.locked ? 'locked' : ''}`} role="button" tabIndex={-1} aria-label={node.group.locked ? '解除图层组锁定' : '锁定图层组'} aria-pressed={node.group.locked} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); store.setGroupProperties(node.group.id, node.group.name, node.group.opacity, node.group.blendMode, !node.group.locked, node.group.displayColor, node.group.description) }}>{node.group.locked ? <Lock size={14} /> : <LockOpen size={14} />}</span><span className="group-folder" role="button" tabIndex={-1} aria-label={collapsed ? '展开图层组' : '收起图层组'} title={collapsed ? '展开图层组' : '收起图层组'} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); store.toggleGroupCollapsed(node.group.id) }}>{collapsed ? <Folder size={16} /> : <FolderOpen size={16} />}</span><Tooltip className="layer-name" content={node.group.description?.trim()}><span>{node.group.name}</span><small>{blendOptions.find((option) => option.value === node.group.blendMode)?.label} · {Math.round(node.group.opacity * 100)}%</small></Tooltip></button>
+        return <button key={node.group.id} data-group-id={node.group.id} className={`layer-row group-row ${session.selectedGroupIds.includes(node.group.id) ? 'selected' : ''} ${draggingGroupId === node.group.id ? 'dragging' : ''} ${groupIndicator ? 'group-drop-target' : ''}`} style={{ '--layer-depth': node.depth } as React.CSSProperties} onPointerDown={(event) => beginGroupDrag(event, node.group.id)} onDoubleClick={() => editGroup(node.group)}>{groupIndicator}{node.group.displayColor && <span className="layer-color-stripe" style={{ backgroundColor: `rgba(${node.group.displayColor.r}, ${node.group.displayColor.g}, ${node.group.displayColor.b}, ${node.group.displayColor.a / 255})` }} aria-hidden="true" />}<span className="layer-visibility" role="button" tabIndex={-1} aria-label={node.group.visible ? '隐藏图层组' : '显示图层组'} onPointerDown={(event) => event.stopPropagation()} onDoubleClick={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); store.toggleGroupVisibility(node.group.id) }}>{node.group.visible ? <Eye size={14} /> : <EyeOff size={14} />}</span><span className={`layer-lock-toggle ${node.group.locked || lockingAncestor ? 'locked' : ''}`} role="button" tabIndex={-1} title={lockingAncestor ? `“${lockingAncestor.name}”已上锁，无法编辑` : undefined} aria-label={lockingAncestor ? `${lockingAncestor.name}已上锁，无法编辑` : node.group.locked ? '解除图层组锁定' : '锁定图层组'} aria-disabled={Boolean(lockingAncestor)} aria-pressed={node.group.locked || Boolean(lockingAncestor)} onPointerDown={(event) => event.stopPropagation()} onDoubleClick={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); if (lockingAncestor) store.setMessage(`“${lockingAncestor.name}”已上锁，无法编辑`); else store.setGroupProperties(node.group.id, node.group.name, node.group.opacity, node.group.blendMode, !node.group.locked, node.group.displayColor, node.group.description) }}>{node.group.locked || lockingAncestor ? <Lock size={14} /> : <LockOpen size={14} />}</span><span className="group-folder" role="button" tabIndex={-1} aria-label={collapsed ? '展开图层组' : '收起图层组'} title={collapsed ? '展开图层组' : '收起图层组'} onPointerDown={(event) => event.stopPropagation()} onDoubleClick={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); store.toggleGroupCollapsed(node.group.id) }}>{collapsed ? <Folder size={16} /> : <FolderOpen size={16} />}</span><Tooltip className="layer-name" content={node.group.description?.trim()}><span>{node.group.name}</span><small>{blendOptions.find((option) => option.value === node.group.blendMode)?.label} · {Math.round(node.group.opacity * 100)}%</small></Tooltip></button>
       }
       const selected = session.selectedLayerIds.includes(node.layer.id) && !session.selectedGroupId
+      const lockingGroup = getLayerLockingGroup(session.document, node.layer)
       const indicator = dropTarget?.kind === 'layer' && dropTarget.id === node.layer.id
-        ? <span className={`layer-drop-indicator ${dropTarget.insertAfter ? 'above' : 'below'}`} style={{ left: `${8 + dropTarget.depth * 14}px` }} aria-hidden="true"><i /><b /><i /></span>
+        ? <span className={`layer-drop-indicator ${dropTarget.insertAfter ? 'above' : 'below'}`} style={{ left: `${8 + node.depth * 14}px` }} aria-hidden="true"><i /><b /><i /></span>
         : null
-      return <button key={node.layer.id} data-layer-id={node.layer.id} className={`layer-row ${node.depth > 0 ? 'group-member' : ''} ${selected ? 'selected' : ''} ${draggingIds.includes(node.layer.id) ? 'dragging' : ''}`} style={{ '--layer-depth': node.depth } as React.CSSProperties} onPointerDown={(event) => beginLayerDrag(event, node.layer.id)} onDoubleClick={() => editLayer(node.layer)}>{indicator}{node.layer.displayColor && <span className="layer-color-stripe" style={{ backgroundColor: `rgba(${node.layer.displayColor.r}, ${node.layer.displayColor.g}, ${node.layer.displayColor.b}, ${node.layer.displayColor.a / 255})` }} aria-hidden="true" />}<span className="layer-visibility" role="button" tabIndex={-1} aria-label={node.layer.visible ? '隐藏图层' : '显示图层'} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); store.toggleLayerVisibility(node.layer.id) }}>{node.layer.visible ? <Eye size={14} /> : <EyeOff size={14} />}</span><span className={`layer-lock-toggle ${node.layer.locked ? 'locked' : ''}`} role="button" tabIndex={-1} aria-label={node.layer.locked ? '解除图层锁定' : '锁定图层'} aria-pressed={node.layer.locked} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); store.setLayerPropertiesWithBlend(node.layer.id, node.layer.name, node.layer.opacity, node.layer.blendMode, !node.layer.locked, node.layer.displayColor, node.layer.description) }}>{node.layer.locked ? <Lock size={14} /> : <LockOpen size={14} />}</span><Tooltip className="layer-name" content={node.layer.description?.trim()}><span>{node.layer.name}</span><small>{blendOptions.find((option) => option.value === node.layer.blendMode)?.label} · {Math.round(node.layer.opacity * 100)}%</small></Tooltip></button>
-    })}{dropTarget?.kind === 'root' && <div className="layer-root-drop-target" aria-hidden="true"><span>移到最外层</span></div>}{dragGhost && <div className="layer-drag-ghost" style={{ top: dragGhost.y }}><span>{dragGhost.name}</span>{dragGhost.count > 1 && <small>+{dragGhost.count - 1}</small>}</div>}</div>
+      return <button key={node.layer.id} data-layer-id={node.layer.id} className={`layer-row ${node.depth > 0 ? 'group-member' : ''} ${selected ? 'selected' : ''} ${draggingIds.includes(node.layer.id) ? 'dragging' : ''}`} style={{ '--layer-depth': node.depth } as React.CSSProperties} onPointerDown={(event) => beginLayerDrag(event, node.layer.id)} onDoubleClick={() => editLayer(node.layer)}>{indicator}{node.layer.displayColor && <span className="layer-color-stripe" style={{ backgroundColor: `rgba(${node.layer.displayColor.r}, ${node.layer.displayColor.g}, ${node.layer.displayColor.b}, ${node.layer.displayColor.a / 255})` }} aria-hidden="true" />}<span className="layer-visibility" role="button" tabIndex={-1} aria-label={node.layer.visible ? '隐藏图层' : '显示图层'} onPointerDown={(event) => event.stopPropagation()} onDoubleClick={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); store.toggleLayerVisibility(node.layer.id) }}>{node.layer.visible ? <Eye size={14} /> : <EyeOff size={14} />}</span><span className={`layer-lock-toggle ${node.layer.locked || lockingGroup ? 'locked' : ''}`} role="button" tabIndex={-1} title={lockingGroup ? `“${lockingGroup.name}”已上锁，无法编辑` : undefined} aria-label={lockingGroup ? `${lockingGroup.name}已上锁，无法编辑` : node.layer.locked ? '解除图层锁定' : '锁定图层'} aria-disabled={Boolean(lockingGroup)} aria-pressed={node.layer.locked || Boolean(lockingGroup)} onPointerDown={(event) => event.stopPropagation()} onDoubleClick={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); if (lockingGroup) store.setMessage(`“${lockingGroup.name}”已上锁，无法编辑`); else store.setLayerPropertiesWithBlend(node.layer.id, node.layer.name, node.layer.opacity, node.layer.blendMode, !node.layer.locked, node.layer.displayColor, node.layer.description) }}>{node.layer.locked || lockingGroup ? <Lock size={14} /> : <LockOpen size={14} />}</span><Tooltip className="layer-name" content={node.layer.description?.trim()}><span>{node.layer.name}</span><small>{blendOptions.find((option) => option.value === node.layer.blendMode)?.label} · {Math.round(node.layer.opacity * 100)}%</small></Tooltip></button>
+    })}{dropTarget?.kind === 'edge' && <div className={`layer-edge-drop-indicator ${dropTarget.edge}`} aria-hidden="true" />}{dragGhost && <div className="layer-drag-ghost" style={{ top: dragGhost.y }}><span>{dragGhost.name}</span>{dragGhost.count > 1 && <small>+{dragGhost.count - 1}</small>}</div>}</div>
     {contextMenu && <div className="layer-context-menu" style={{ left: contextMenu.x, top: contextMenu.y }} role="menu" onPointerDown={(event) => event.stopPropagation()}><button role="menuitem" onClick={() => { void store.addLayer(); closeContextMenu() }}><Plus size={14} />新建图层</button><button role="menuitem" onClick={() => { store.createLayerGroup(); closeContextMenu() }}><FolderPlus size={14} />新建图层组</button>{contextMenu.kind === 'layer' && <><button role="menuitem" onClick={() => { store.duplicateActiveLayer(); closeContextMenu() }}><Copy size={14} />复制图层</button><button role="menuitem" onClick={() => { session.selectedLayerIds.length > 1 ? store.mergeSelectedLayers() : store.mergeActiveLayerDown(); closeContextMenu() }}><Combine size={14} />{session.selectedLayerIds.length > 1 ? '合并所选图层' : '向下合并'}</button></>}{contextMenu.kind === 'group' && <><button role="menuitem" onClick={() => { store.toggleGroupCollapsed(contextMenu.id); closeContextMenu() }}><FolderOpen size={14} />展开/收起图层组</button><button role="menuitem" onClick={() => { store.mergeSelectedGroup(); closeContextMenu() }}><Combine size={14} />合并图层组</button><button role="menuitem" onClick={() => { store.ungroupSelected(); closeContextMenu() }}><FolderMinus size={14} />解组</button></>}<button role="menuitem" onClick={() => { store.mergeVisibleLayers(); closeContextMenu() }}><Layers2 size={14} />合并可见图层</button><button role="menuitem" onClick={openProperties}><Settings2 size={14} />属性</button>{contextMenu.kind === 'layer' && <button role="menuitem" className="danger" onClick={() => { store.deleteActiveLayer(); closeContextMenu() }}><Trash2 size={14} />删除</button>}</div>}
-    {form && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) closeProperties() }}><form className="modal layer-modal" onSubmit={(event) => { event.preventDefault(); closeProperties() }} onKeyDown={(event) => { if (event.key !== 'Enter' || event.nativeEvent.isComposing || (event.target as HTMLElement).tagName === 'TEXTAREA') return; event.preventDefault(); event.stopPropagation(); closeProperties() }}><header><div><span className="eyebrow">{form.kind === 'group' ? 'GROUP PROPERTIES' : 'LAYER PROPERTIES'}</span><h2>{form.kind === 'group' ? '图层组属性' : '图层属性'}</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={closeProperties}><X size={16} /></button></header><div className="modal-body"><label>名称<input autoFocus value={form.name} onChange={(event) => previewProperties({ ...form, name: event.target.value })} /></label><label>混合模式<ThemedSelect label="混合模式" value={form.blendMode} groups={blendOptionGroups} onChange={(blendMode) => previewProperties({ ...form, blendMode })} /></label><label>不透明度<div className="layer-opacity-control"><input aria-label="不透明度" type="range" min="0" max="100" step="1" value={form.opacity} onChange={(event) => previewProperties({ ...form, opacity: Number(event.target.value) })} /><NumberInput aria-label="不透明度数值" min={0} max={100} value={form.opacity} onValueChange={(opacity) => previewProperties({ ...form, opacity })} /><span>%</span></div></label><label className="layer-display-color-field">显示颜色<div className="layer-display-color-options"><button type="button" className={`layer-color-preset no-color ${form.displayColor === null ? 'selected' : ''}`} aria-label="无显示颜色" aria-pressed={form.displayColor === null} onClick={() => previewProperties({ ...form, displayColor: null })}><span /></button>{layerDisplayColorPresets.map((color) => <button key={`${color.r}-${color.g}-${color.b}`} type="button" className={`layer-color-preset ${sameColor(form.displayColor, color) ? 'selected' : ''}`} aria-label={`显示颜色 ${color.r}, ${color.g}, ${color.b}`} aria-pressed={sameColor(form.displayColor, color)} style={{ '--layer-preset-color': `rgb(${color.r} ${color.g} ${color.b})` } as React.CSSProperties} onClick={() => previewProperties({ ...form, displayColor: { ...color } })}><span /></button>)}<ColorValueControl color={form.displayColor ?? defaultLayerDisplayColor} onChange={(displayColor) => previewProperties({ ...form, displayColor })} label="图层显示颜色" roleLabel="自定义" className="layer-custom-color-trigger" /></div></label><label>描述<TextAreaInput rows={4} value={form.description} placeholder="输入图层描述" onChange={(event) => previewProperties({ ...form, description: event.target.value })} /></label></div></form></div>}
+    {form && <div className="modal-backdrop" role="presentation" onPointerDown={(event) => { if (event.target === event.currentTarget) closeProperties() }}>
+      <ModalShell as="form" storageKey="layer-properties" defaultWidth={420} defaultHeight={470} minWidth={360} minHeight={400} maxWidth={600} maxHeight={700} className="layer-modal" onSubmit={(event) => { event.preventDefault(); closeProperties() }} onKeyDown={(event) => {
+        if (event.key !== 'Enter' || event.nativeEvent.isComposing || (event.target as HTMLElement).tagName === 'TEXTAREA') return
+        event.preventDefault()
+        event.stopPropagation()
+        closeProperties()
+      }}>
+        <header><div><span className="eyebrow">{form.kind === 'group' ? 'GROUP PROPERTIES' : 'LAYER PROPERTIES'}</span><h2>{form.kind === 'group' ? '图层组属性' : '图层属性'}</h2></div><button type="button" className="icon-button" aria-label="关闭" onClick={closeProperties}><X size={16} /></button></header>
+        <div className="modal-body">
+          <label>名称<input autoFocus value={form.name} onChange={(event) => previewProperties({ ...form, name: event.target.value })} /></label>
+          <label>混合模式<ThemedSelect label="混合模式" value={form.blendMode} groups={blendOptionGroups} disabled={form.kind === 'group' ? isGroupEffectivelyLocked(session.document, session.document.groups.find((group) => group.id === form.id)!) : isLayerEffectivelyLocked(session.document, session.document.layers.find((layer) => layer.id === form.id)!)} onChange={(blendMode) => previewProperties({ ...form, blendMode })} /></label>
+          <label>不透明度<div className="layer-opacity-control"><input aria-label="不透明度" type="range" min="0" max="100" step="1" disabled={form.kind === 'group' ? isGroupEffectivelyLocked(session.document, session.document.groups.find((group) => group.id === form.id)!) : isLayerEffectivelyLocked(session.document, session.document.layers.find((layer) => layer.id === form.id)!)} value={form.opacity} onChange={(event) => previewProperties({ ...form, opacity: Number(event.target.value) })} /><NumberInput aria-label="不透明度数值" min={0} max={100} disabled={form.kind === 'group' ? isGroupEffectivelyLocked(session.document, session.document.groups.find((group) => group.id === form.id)!) : isLayerEffectivelyLocked(session.document, session.document.layers.find((layer) => layer.id === form.id)!)} value={form.opacity} onValueChange={(opacity) => previewProperties({ ...form, opacity })} /><span>%</span></div></label>
+          <label className="layer-display-color-field">显示颜色<div className="layer-display-color-options"><button type="button" className={`layer-color-preset no-color ${form.displayColor === null ? 'selected' : ''}`} aria-label="无显示颜色" aria-pressed={form.displayColor === null} onClick={() => previewProperties({ ...form, displayColor: null })}><span /></button>{layerDisplayColorPresets.map((color) => <button key={`${color.r}-${color.g}-${color.b}`} type="button" className={`layer-color-preset ${sameColor(form.displayColor, color) ? 'selected' : ''}`} aria-label={`显示颜色 ${color.r}, ${color.g}, ${color.b}`} aria-pressed={sameColor(form.displayColor, color)} style={{ '--layer-preset-color': `rgb(${color.r} ${color.g} ${color.b})` } as React.CSSProperties} onClick={() => previewProperties({ ...form, displayColor: { ...color } })}><span /></button>)}<ColorValueControl color={form.displayColor ?? defaultLayerDisplayColor} onChange={(displayColor) => previewProperties({ ...form, displayColor })} label="图层显示颜色" roleLabel="自定义" className="layer-custom-color-trigger" /></div></label>
+          <label>描述<TextAreaInput rows={4} value={form.description} placeholder="输入图层描述" onChange={(event) => previewProperties({ ...form, description: event.target.value })} /></label>
+        </div>
+      </ModalShell>
+    </div>}
     {floating.style && <PanelResizeHandles onResize={floating.startResize} />}
   </section>
   <FloatingDockPreview style={floating.dockPreview} />
diff --git a/src/renderer/src/components/panels/PalettePanel.tsx b/src/renderer/src/components/panels/PalettePanel.tsx
index 98e2b25..f7e83e4 100644
--- a/src/renderer/src/components/panels/PalettePanel.tsx
+++ b/src/renderer/src/components/panels/PalettePanel.tsx
@@ -213,6 +213,20 @@ export function PalettePanel({ session, docked = false, onDockDragStart, onPanel
     }
   }, [])
 
+  useEffect(() => {
+    const close = (event: Event): void => {
+      const target = (event as CustomEvent<{ target?: string }>).detail?.target
+      if (target && target !== 'palette') return
+      if (saveOpen) setSaveOpen(false)
+      else if (extractOpen) setExtractOpen(false)
+      else if (paletteContext) setPaletteContext(null)
+      else if (libraryOpen) setLibraryOpen(false)
+      else if (paletteActionsOpen) setPaletteActionsOpen(false)
+    }
+    window.addEventListener('moonsprite:close-dialog', close)
+    return () => window.removeEventListener('moonsprite:close-dialog', close)
+  }, [extractOpen, libraryOpen, paletteActionsOpen, paletteContext, saveOpen])
+
   const upsertPalette = (palette: StoredPalette): void => {
     setPaletteFiles((current) => {
       const existingIndex = current.findIndex((item) => item.id === palette.id)
@@ -326,7 +340,7 @@ export function PalettePanel({ session, docked = false, onDockDragStart, onPanel
     }
   }
 
-  return <><section ref={floating.ref} className={`panel palette-panel ${floating.style ? 'floating-panel' : ''}`} style={floating.style} onPointerDown={floating.bringToFront} onContextMenu={onPanelContextMenu}>
+  return <><section ref={floating.ref} className={`panel palette-panel ${floating.style ? 'floating-panel' : ''}`} data-command-scope="palette" style={floating.style} onPointerDown={floating.bringToFront} onContextMenu={onPanelContextMenu}>
     <header onPointerDown={(event) => floating.style ? floating.startDrag(event) : onDockDragStart?.(event, floating.startDetachedDrag)}><Palette size={15} /><span>调色板</span><small>{ordered.length} 色</small><span className="panel-actions palette-actions">
       <span ref={libraryControlRef} className="palette-library-control"><button ref={libraryButtonRef} className={libraryOpen ? 'active' : ''} title="选择本地色板" aria-label="选择本地色板" aria-expanded={libraryOpen} onClick={() => { setLibraryOpen((open) => !open); setPaletteActionsOpen(false) }}><BookOpen size={14} /></button></span>
       <span ref={paletteActionsControlRef} className="palette-actions-control"><button ref={paletteActionsButtonRef} className={paletteActionsOpen ? 'active' : ''} title="调色板操作" aria-label="调色板操作" aria-expanded={paletteActionsOpen} onClick={() => { setPaletteActionsOpen((open) => !open); setLibraryOpen(false) }}><Settings2 size={14} /></button></span>
diff --git a/src/renderer/src/components/panels/PreviewPanel.tsx b/src/renderer/src/components/panels/PreviewPanel.tsx
index 8c27157..cf563c9 100644
--- a/src/renderer/src/components/panels/PreviewPanel.tsx
+++ b/src/renderer/src/components/panels/PreviewPanel.tsx
@@ -3,7 +3,7 @@ import { Minus, Plus, X } from 'lucide-react'
 import { FloatingDockPreview, PanelResizeHandles, useFloatingPanel } from '@/components/floating-panel'
 import type { DockDragProps } from '@/components/workspace-panel-types'
 import { createCompositeSampler } from '@/core/document'
-import { anchoredPreviewPan } from '@/core/preview-geometry'
+import { anchoredPreviewPan, previewCheckerCellSize } from '@/core/preview-geometry'
 import { relativeLuminanceColor } from '@/core/raster'
 import { loadEditorPreferences, type CheckerboardPreferences } from '@/core/file-preferences'
 import type { DocumentSession } from '@/store/workspace'
@@ -16,12 +16,11 @@ export function PreviewPanel({ session, onClose, docked = false, onDockDragStart
   const [pan, setPan] = useState({ x: 0, y: 0 })
   const [checkerboard, setCheckerboard] = useState<CheckerboardPreferences>(() => loadEditorPreferences().checkerboard)
   const panDrag = useRef<{ x: number; y: number; panX: number; panY: number } | null>(null)
-  const sourceRef = useRef<{ documentId: string; revision: number; relativeLuminance: boolean; checkerboardKey: string; canvas: OffscreenCanvas } | null>(null)
+  const sourceRef = useRef<{ documentId: string; revision: number; relativeLuminance: boolean; canvas: OffscreenCanvas } | null>(null)
   const baseFitRef = useRef<{ documentId: string; width: number; height: number; viewportWidth: number; viewportHeight: number; scale: number } | null>(null)
   const panFrameRef = useRef<number | null>(null)
   const pendingPanRef = useRef<{ x: number; y: number } | null>(null)
   const showRelativeLuminance = session.view.relativeLuminance && relativeLuminanceInPreview
-  const checkerboardKey = `${checkerboard.size}:${checkerboard.lightColor.r}:${checkerboard.lightColor.g}:${checkerboard.lightColor.b}:${checkerboard.darkColor.r}:${checkerboard.darkColor.g}:${checkerboard.darkColor.b}`
 
   useEffect(() => {
     const syncPreferences = (): void => setCheckerboard(loadEditorPreferences().checkerboard)
@@ -33,7 +32,7 @@ export function PreviewPanel({ session, onClose, docked = false, onDockDragStart
     const canvas = canvasRef.current
     if (!canvas) return
     let source = sourceRef.current
-    if (!source || source.documentId !== session.document.id || source.revision !== session.revision || source.relativeLuminance !== showRelativeLuminance || source.checkerboardKey !== checkerboardKey) {
+    if (!source || source.documentId !== session.document.id || source.revision !== session.revision || source.relativeLuminance !== showRelativeLuminance) {
       const documentWidth = session.document.width
       const documentHeight = session.document.height
       const sourceScale = Math.min(1, 512 / Math.max(documentWidth, documentHeight))
@@ -49,16 +48,14 @@ export function PreviewPanel({ session, onClose, docked = false, onDockDragStart
         const sourceY = Math.min(documentHeight - 1, Math.floor(previewY / sourceScale))
         const sampled = sampleComposite(sourceY * documentWidth + sourceX)
         const color = showRelativeLuminance ? relativeLuminanceColor(sampled) : sampled
-        const checker = (Math.floor(sourceX / checkerboard.size) + Math.floor(sourceY / checkerboard.size)) % 2 === 0 ? checkerboard.lightColor : checkerboard.darkColor
-        const alpha = color.a / 255
-        pixels[offset] = Math.round(color.r * alpha + checker.r * (1 - alpha))
-        pixels[offset + 1] = Math.round(color.g * alpha + checker.g * (1 - alpha))
-        pixels[offset + 2] = Math.round(color.b * alpha + checker.b * (1 - alpha))
-        pixels[offset + 3] = 255
+        pixels[offset] = color.r
+        pixels[offset + 1] = color.g
+        pixels[offset + 2] = color.b
+        pixels[offset + 3] = color.a
       }
       const sourceCanvas = new OffscreenCanvas(width, height)
       sourceCanvas.getContext('2d')?.putImageData(new ImageData(pixels, width, height), 0, 0)
-      source = { documentId: session.document.id, revision: session.revision, relativeLuminance: showRelativeLuminance, checkerboardKey, canvas: sourceCanvas }
+      source = { documentId: session.document.id, revision: session.revision, relativeLuminance: showRelativeLuminance, canvas: sourceCanvas }
       sourceRef.current = source
     }
     const draw = (): void => {
@@ -85,14 +82,35 @@ export function PreviewPanel({ session, onClose, docked = false, onDockDragStart
       const originY = (displayHeight - drawHeight) / 2 + pan.y
       context.fillStyle = '#4a4a51'
       context.fillRect(0, 0, displayWidth, displayHeight)
+      context.save()
+      context.beginPath()
+      context.rect(originX, originY, drawWidth, drawHeight)
+      context.clip()
+      context.fillStyle = `rgb(${checkerboard.lightColor.r} ${checkerboard.lightColor.g} ${checkerboard.lightColor.b})`
+      context.fillRect(originX, originY, drawWidth, drawHeight)
+      const checkerCell = previewCheckerCellSize(checkerboard.size, scale)
+      if (checkerCell >= 2) {
+        const columnCount = Math.ceil(session.document.width / checkerboard.size)
+        const rowCount = Math.ceil(session.document.height / checkerboard.size)
+        const firstColumn = Math.max(0, Math.floor((0 - originX) / checkerCell))
+        const firstRow = Math.max(0, Math.floor((0 - originY) / checkerCell))
+        const lastColumn = Math.min(columnCount, Math.ceil((displayWidth - originX) / checkerCell))
+        const lastRow = Math.min(rowCount, Math.ceil((displayHeight - originY) / checkerCell))
+        context.fillStyle = `rgb(${checkerboard.darkColor.r} ${checkerboard.darkColor.g} ${checkerboard.darkColor.b})`
+        for (let row = firstRow; row < lastRow; row += 1) for (let column = firstColumn; column < lastColumn; column += 1) {
+          if ((column + row) % 2 === 0) continue
+          context.fillRect(originX + column * checkerCell, originY + row * checkerCell, checkerCell, checkerCell)
+        }
+      }
       context.imageSmoothingEnabled = false
       context.drawImage(source.canvas, originX, originY, drawWidth, drawHeight)
+      context.restore()
     }
     draw()
     const observer = new ResizeObserver(draw)
     observer.observe(canvas)
     return () => observer.disconnect()
-  }, [session.document, session.revision, showRelativeLuminance, checkerboard, checkerboardKey, zoom, pan])
+  }, [session.document, session.revision, showRelativeLuminance, checkerboard, zoom, pan])
 
   useEffect(() => () => {
     if (panFrameRef.current !== null) window.cancelAnimationFrame(panFrameRef.current)
diff --git a/src/renderer/src/core/adjustments.test.ts b/src/renderer/src/core/adjustments.test.ts
index b15abdc..a16d0b3 100644
--- a/src/renderer/src/core/adjustments.test.ts
+++ b/src/renderer/src/core/adjustments.test.ts
@@ -9,6 +9,14 @@ describe('color adjustments', () => {
     expect(next.r).toBeGreaterThan(80)
   })
 
+  it('adjusts HSL lightness independently from RGB brightness', () => {
+    const source = { r: 40, g: 100, b: 180, a: 140 }
+    const lighter = adjustColor(source, { kind: 'hue-saturation', lightness: 100 })
+    const darker = adjustColor(source, { kind: 'hue-saturation', lightness: -100 })
+    expect(lighter).toEqual({ r: 255, g: 255, b: 255, a: 140 })
+    expect(darker).toEqual({ r: 0, g: 0, b: 0, a: 140 })
+  })
+
   it('records only changed active-layer pixels', () => {
     const document = createDocument('adjust', 2, 1, 'rgba')
     const layer = getActiveLayer(document)
diff --git a/src/renderer/src/core/adjustments.ts b/src/renderer/src/core/adjustments.ts
index 32e5621..db987b4 100644
--- a/src/renderer/src/core/adjustments.ts
+++ b/src/renderer/src/core/adjustments.ts
@@ -24,6 +24,7 @@ export interface ColorAdjustment {
   contrast?: number
   hue?: number
   saturation?: number
+  lightness?: number
   /** Curve's midpoint, 0-255. 128 is the identity. */
   curveMidpoint?: number
   curvePoints?: CurvePoint[]
@@ -162,7 +163,11 @@ export function adjustColor(color: RgbaColor, adjustment: ColorAdjustment, prepa
   }
   if (adjustment.kind === 'hue-saturation') {
     const hsl = rgbToHsl(color)
-    return hslToRgb(hsl.h + (adjustment.hue ?? 0), hsl.s * (1 + (adjustment.saturation ?? 0) / 100), hsl.l, color.a)
+    const lightnessDelta = (adjustment.lightness ?? 0) / 100
+    const lightness = lightnessDelta >= 0
+      ? hsl.l + (1 - hsl.l) * lightnessDelta
+      : hsl.l * (1 + lightnessDelta)
+    return hslToRgb(hsl.h + (adjustment.hue ?? 0), hsl.s * (1 + (adjustment.saturation ?? 0) / 100), lightness, color.a)
   }
   if (adjustment.kind === 'color-balance') {
     const luminance = (color.r * 0.2126 + color.g * 0.7152 + color.b * 0.0722) / 255
diff --git a/src/renderer/src/core/app-meta.ts b/src/renderer/src/core/app-meta.ts
index 45358b8..521ea8c 100644
--- a/src/renderer/src/core/app-meta.ts
+++ b/src/renderer/src/core/app-meta.ts
@@ -1 +1 @@
-export const APP_CHANNEL_LABEL = 'DEV.1'
+export const APP_CHANNEL_LABEL = 'DEV.2'
diff --git a/src/renderer/src/core/app-render-keys.test.ts b/src/renderer/src/core/app-render-keys.test.ts
index 79503cd..87d9f89 100644
--- a/src/renderer/src/core/app-render-keys.test.ts
+++ b/src/renderer/src/core/app-render-keys.test.ts
@@ -68,5 +68,10 @@ describe('app render keys', () => {
 
     session.view.showGrid = true
     expect(appCoordinatorRenderKey(state)).not.toBe(before)
+
+    const hiddenOutline = appCoordinatorRenderKey(state)
+    session.view.showSelectionOutline = false
+    expect(appCoordinatorRenderKey(state)).not.toBe(hiddenOutline)
+    expect(appMenuRenderKey(session)).toContain(';0;')
   })
 })
diff --git a/src/renderer/src/core/app-render-keys.ts b/src/renderer/src/core/app-render-keys.ts
index 34f1ac1..7efd595 100644
--- a/src/renderer/src/core/app-render-keys.ts
+++ b/src/renderer/src/core/app-render-keys.ts
@@ -35,6 +35,7 @@ export const appCoordinatorRenderKey = (state: AppCoordinatorState): string => {
     session?.document.height ?? 0,
     session?.view.showGrid ? 1 : 0,
     session?.view.relativeLuminance ? 1 : 0,
+    session?.view.showSelectionOutline === false ? 0 : 1,
     preview ? `${preview.width}:${preview.height}:${preview.offsetX}:${preview.offsetY}` : '',
     state.saveProgress ? `${state.saveProgress.title}:${state.saveProgress.value}:${state.saveProgress.label}` : '',
     state.dialog ? `${state.dialog.title}:${state.dialog.message}:${state.dialog.detail ?? ''}:${state.dialog.choices.map((choice) => `${choice.id}:${choice.label}:${choice.tone ?? ''}`).join('|')}` : ''
@@ -56,9 +57,11 @@ export const appMenuRenderKey = (session: DocumentSession | null): string => ses
       session.history.canRedo ? 1 : 0,
       session.selection ? 1 : 0,
       session.selectedGroupId ?? '',
+      session.selectedGroupIds.join(','),
       session.selectedLayerIds.join(','),
       session.view.showGrid ? 1 : 0,
       session.view.relativeLuminance ? 1 : 0,
+      session.view.showSelectionOutline === false ? 0 : 1,
       session.view.mirrored ? 1 : 0,
       session.view.mirroredVertical ? 1 : 0
     ].join(';')
@@ -87,6 +90,8 @@ export const toolOptionsRenderKey = (session: DocumentSession | null): string =>
     session.proceduralAntialias ? 1 : 0,
     session.proceduralAntialiasStrength,
     session.shapeKind,
+    session.shapeRatio?.width ?? '',
+    session.shapeRatio?.height ?? '',
     session.fillMode,
     session.moveAutoSelect ? 1 : 0,
     session.selectionKind,
diff --git a/src/renderer/src/core/canvas-input.test.ts b/src/renderer/src/core/canvas-input.test.ts
index bd74af7..c19d47a 100644
--- a/src/renderer/src/core/canvas-input.test.ts
+++ b/src/renderer/src/core/canvas-input.test.ts
@@ -1,9 +1,101 @@
 import { describe, expect, it } from 'vitest'
-import { CanvasInputState, SELECTION_CORNER_RESIZE_HIT_RADIUS, SELECTION_RESIZE_HIT_RADIUS, clampCanvasZoom, constrainedTranslation, resizeSelectionBounds, rotationHandles, selectionInteractionHit, selectionResizeHit, selectionRotationHit, selectionTransformModifiers, shapeBounds, shouldStartCanvasPan, snapSelectionRotation, steppedCanvasZoom, zoomDragModeForModifiers, zoomDragTarget, type CanvasDragState } from './canvas-input'
+import { CanvasInputState, SELECTION_CORNER_RESIZE_HIT_RADIUS, SELECTION_RESIZE_HIT_RADIUS, appendPolygonLassoVertex, canvasGestureForPreview, clampCanvasZoom, constrainedTranslation, createCanvasPanDrag, finalizeMarqueeSelection, polygonLassoClosedPathPoints, polygonLassoPreviewPoints, resizeSelectionBounds, restoreCanvasDragAfterPan, rotationHandles, selectionGestureMoved, selectionInteractionHit, selectionOverlayMaskForDrag, selectionResizeHit, selectionRotationHit, selectionTransformModifiers, shapeBounds, shouldClosePolygonLasso, shouldRestartFloatingSelectionForCopy, shouldStartCanvasPan, snapSelectionRotation, steppedCanvasZoom, zoomDragModeForModifiers, zoomDragTarget, type CanvasDragState } from './canvas-input'
+import { balancedStairLinePoints } from './pixel-line'
 
 const drag = (): CanvasDragState => ({ kind: 'move-content', start: { x: 0, y: 0 }, last: { x: 0, y: 0 } })
 
 describe('canvas input helpers', () => {
+  it('uses the balanced stair algorithm for polygon lasso preview and closed edges when enabled', () => {
+    const path = [{ x: 0, y: 0 }, { x: 8, y: 2 }, { x: 7, y: 7 }]
+    expect(polygonLassoPreviewPoints(path, { x: 2, y: 8 }, false, true)).toEqual([
+      ...balancedStairLinePoints(path[0], path[1]),
+      ...balancedStairLinePoints(path[1], path[2]),
+      ...balancedStairLinePoints(path[2], { x: 2, y: 8 })
+    ])
+    expect(polygonLassoClosedPathPoints(path, true)).toEqual([
+      ...balancedStairLinePoints(path[0], path[1]),
+      ...balancedStairLinePoints(path[1], path[2]),
+      ...balancedStairLinePoints(path[2], path[0])
+    ])
+  })
+
+  it('distinguishes a click from a drag inside one document pixel', () => {
+    expect(selectionGestureMoved({ x: 100, y: 100 }, { x: 102, y: 103 })).toBe(false)
+    expect(selectionGestureMoved({ x: 100, y: 100 }, { x: 104, y: 100 })).toBe(true)
+  })
+
+  it('treats a marquee click as deselect only in replace mode', () => {
+    const before = { x: 2, y: 2, width: 3, height: 3 }
+    expect(finalizeMarqueeSelection(before, before, false, 'replace')).toBeNull()
+    expect(finalizeMarqueeSelection(before, before, false, 'subtract')).toEqual(before)
+    expect(finalizeMarqueeSelection(null, null, false, 'replace')).toBeNull()
+  })
+
+  it('keeps the existing selection outline visible while add or subtract gestures are being created', () => {
+    const before = { x: 2, y: 2, width: 3, height: 3 }
+    const incoming = { x: 8, y: 8, width: 2, height: 2 }
+    const drag: CanvasDragState = {
+      kind: 'marquee',
+      start: { x: 8, y: 8 },
+      last: { x: 9, y: 9 },
+      selectionStart: before,
+      selectionMode: 'add',
+      previewSelection: incoming
+    }
+
+    expect(selectionOverlayMaskForDrag(incoming, drag)).toEqual(before)
+    expect(selectionOverlayMaskForDrag(incoming, { ...drag, selectionMode: 'subtract' })).toEqual(before)
+    expect(finalizeMarqueeSelection(before, incoming, false, 'add')).toEqual(before)
+  })
+
+  it('restores an unfinished polygon lasso after a temporary canvas pan', () => {
+    const polygon: CanvasDragState = {
+      kind: 'polygon-lasso',
+      start: { x: 1, y: 1 },
+      last: { x: 8, y: 4 },
+      path: [{ x: 1, y: 1 }, { x: 8, y: 1 }, { x: 8, y: 4 }],
+      selectionMode: 'add',
+      selectionStart: { x: 0, y: 0, width: 2, height: 2 }
+    }
+    const pan = createCanvasPanDrag({ x: 10, y: 20 }, { x: 200, y: 120 }, polygon)
+    const restored = restoreCanvasDragAfterPan(pan, { x: 6, y: 7 })
+
+    expect(restored).toMatchObject({
+      kind: 'polygon-lasso',
+      last: { x: 6, y: 7 },
+      path: polygon.path,
+      selectionMode: 'add',
+      selectionStart: polygon.selectionStart
+    })
+    expect(canvasGestureForPreview(pan)).toBe(polygon)
+    expect(selectionOverlayMaskForDrag(null, pan)).toEqual(polygon.selectionStart)
+  })
+
+  it('keeps polygon vertices unique and closes when the first vertex is clicked', () => {
+    const path = [{ x: 2, y: 2 }, { x: 8, y: 2 }, { x: 8, y: 7 }]
+    expect(appendPolygonLassoVertex(path, { x: 8, y: 7 })).toEqual(path)
+    expect(appendPolygonLassoVertex(path, { x: 2, y: 7 })).toEqual([...path, { x: 2, y: 7 }])
+    expect(shouldClosePolygonLasso(path, { x: 2, y: 2 }, 1)).toBe(true)
+    expect(shouldClosePolygonLasso(path, { x: 4, y: 6 }, 2)).toBe(true)
+    expect(shouldClosePolygonLasso(path.slice(0, 2), { x: 2, y: 2 }, 2)).toBe(false)
+  })
+
+  it('connects polygon vertices with rasterized straight lines instead of rectangular elbows', () => {
+    const points = polygonLassoPreviewPoints([{ x: 1, y: 1 }, { x: 4, y: 3 }], { x: 6, y: 4 }, false)
+    const pixels = new Set(points.map((point) => `${point.x}:${point.y}`))
+    expect(pixels).toContain('2:2')
+    expect(pixels).toContain('4:3')
+    expect(pixels).not.toContain('4:1')
+    expect(pixels).not.toContain('1:3')
+  })
+
+  it('restarts every floating selection when Ctrl begins another copy drag', () => {
+    expect(shouldRestartFloatingSelectionForCopy(false, true)).toBe(true)
+    expect(shouldRestartFloatingSelectionForCopy(true, true)).toBe(true)
+    expect(shouldRestartFloatingSelectionForCopy(false, false)).toBe(false)
+    expect(shouldRestartFloatingSelectionForCopy(true, false)).toBe(false)
+  })
+
   it('keeps zoom levels within the supported range', () => {
     expect(clampCanvasZoom(100)).toBe(64)
     expect(steppedCanvasZoom(1, true)).toBe(1.25)
@@ -165,6 +257,19 @@ describe('canvas input helpers', () => {
     expect(shapeBounds({ x: 5, y: 5 }, { x: 2, y: 3 }, true)).toEqual({ x: 2, y: 2, width: 4, height: 4 })
   })
 
+  it('keeps a fixed long-axis ratio in horizontal and vertical drags', () => {
+    expect(shapeBounds({ x: 0, y: 0 }, { x: 7, y: 2 }, false, { width: 2, height: 1 })).toEqual({ x: 0, y: 0, width: 8, height: 5 })
+    expect(shapeBounds({ x: 0, y: 0 }, { x: 2, y: 7 }, false, { width: 2, height: 1 })).toEqual({ x: 0, y: 0, width: 15, height: 8 })
+  })
+
+  it('hits the real masked boundary instead of the rectangular bounds', () => {
+    const mask = new Uint8Array(20 * 20)
+    for (let y = 5; y < 15; y += 1) for (let x = 5; x < 15; x += 1) mask[y * 20 + x] = 1
+    const selection = { x: 10, y: 10, width: 20, height: 20, mask }
+    expect(selectionInteractionHit(selection, { x: 10, y: 15 }, 8)).toBe('outside')
+    expect(selectionInteractionHit(selection, { x: 15, y: 15 }, 8)).toBe('edge')
+  })
+
   it('keeps proportional integer scaling inside document bounds', () => {
     expect(resizeSelectionBounds({ x: 2, y: 2, width: 2, height: 2 }, { x: 8, y: 8 }, 'se', { width: 10, height: 10 }, true, true)).toEqual({ x: 2, y: 2, width: 8, height: 8 })
   })
@@ -212,9 +317,11 @@ describe('canvas input helpers', () => {
     input.altHeld = true
     input.ctrlHeld = true
 
-    input.syncModifierKeys({ altKey: false, ctrlKey: false })
+    input.shiftHeld = true
+    input.syncModifierKeys({ altKey: false, ctrlKey: false, shiftKey: false })
 
     expect(input.altHeld).toBe(false)
     expect(input.ctrlHeld).toBe(false)
+    expect(input.shiftHeld).toBe(false)
   })
 })
diff --git a/src/renderer/src/core/canvas-input.ts b/src/renderer/src/core/canvas-input.ts
index f04d450..cedea48 100644
--- a/src/renderer/src/core/canvas-input.ts
+++ b/src/renderer/src/core/canvas-input.ts
@@ -1,7 +1,18 @@
-import type { RasterLayer, RgbaColor, SelectionMask, SelectionMode, SelectionRect } from '@shared/types'
+import type { RasterLayer, RgbaColor, SelectionMask, SelectionMode, SelectionRect, ShapeRatio } from '@shared/types'
 import type { PixelEdit } from './history'
 import type { SelectionTransformSource, SelectionTranslationPreview } from './tools'
-import { selectionContains } from './selection'
+import { rasterLinePoints, selectionBoundarySegments, selectionContains } from './selection'
+import { balancedStairLinePoints } from './pixel-line'
+
+const selectionHitBoundaryCache = new WeakMap<SelectionMask, Int32Array>()
+
+const cachedSelectionBoundarySegments = (selection: SelectionMask): Int32Array => {
+  const cached = selectionHitBoundaryCache.get(selection)
+  if (cached) return cached
+  const segments = selectionBoundarySegments(selection)
+  selectionHitBoundaryCache.set(selection, segments)
+  return segments
+}
 
 export interface CanvasPoint {
   x: number
@@ -64,7 +75,7 @@ export const selectionResizeHit = (
 }
 
 export interface CanvasDragState {
-  kind: 'draw' | 'shape' | 'marquee' | 'lasso' | 'magic-preview' | 'sample-color' | 'move-content' | 'move-selection' | 'transform-content' | 'rotate-content' | 'move-layer' | 'brush-size' | 'canvas-resize' | 'canvas-move' | 'zoom-drag' | 'rotate-view' | 'pan'
+  kind: 'draw' | 'shape' | 'marquee' | 'lasso' | 'polygon-lasso' | 'magic-preview' | 'sample-color' | 'move-content' | 'move-selection' | 'transform-content' | 'rotate-content' | 'move-layer' | 'brush-size' | 'canvas-resize' | 'canvas-move' | 'zoom-drag' | 'rotate-view' | 'pan'
   start: CanvasPoint
   last: CanvasPoint
   edit?: PixelEdit
@@ -106,8 +117,92 @@ export interface CanvasDragState {
   axisLock?: 'x' | 'y'
   sampleSecondary?: boolean
   temporarySampling?: boolean
+  moved?: boolean
+  resumeDrag?: CanvasDragState
+}
+
+export const selectionGestureMoved = (start: CanvasPoint | undefined, end: CanvasPoint, threshold = 3): boolean =>
+  Boolean(start && (Math.abs(end.x - start.x) > threshold || Math.abs(end.y - start.y) > threshold))
+
+const selectionCreationKinds = new Set<CanvasDragState['kind']>(['marquee', 'lasso', 'polygon-lasso'])
+const selectionPreviewKinds = new Set<CanvasDragState['kind']>(['magic-preview', 'move-selection', 'move-content', 'transform-content', 'rotate-content'])
+
+export const canvasGestureForPreview = (drag: CanvasDragState | null | undefined): CanvasDragState | null =>
+  drag?.kind === 'pan' && drag.resumeDrag?.kind === 'polygon-lasso' ? drag.resumeDrag : drag ?? null
+
+export const selectionOverlayMaskForDrag = (
+  currentSelection: SelectionMask | null,
+  drag: CanvasDragState | null | undefined
+): SelectionMask | null => {
+  const previewDrag = canvasGestureForPreview(drag)
+  if (!previewDrag) return currentSelection
+  if (selectionCreationKinds.has(previewDrag.kind)) return previewDrag.selectionStart ?? null
+  if (selectionPreviewKinds.has(previewDrag.kind)) return previewDrag.previewSelection ?? currentSelection
+  return currentSelection
+}
+
+export const createCanvasPanDrag = (
+  startPan: CanvasPoint,
+  startClient: CanvasPoint,
+  resumeDrag?: CanvasDragState
+): CanvasDragState => ({
+  kind: 'pan',
+  start: { x: 0, y: 0 },
+  last: { x: 0, y: 0 },
+  startPan: { ...startPan },
+  startClient: { ...startClient },
+  resumeDrag: resumeDrag?.kind === 'polygon-lasso' ? resumeDrag : undefined
+})
+
+export const restoreCanvasDragAfterPan = (
+  panDrag: CanvasDragState,
+  pointer: CanvasPoint
+): CanvasDragState | null => panDrag.kind === 'pan' && panDrag.resumeDrag?.kind === 'polygon-lasso'
+  ? { ...panDrag.resumeDrag, last: { ...pointer } }
+  : null
+
+export const appendPolygonLassoVertex = (path: readonly CanvasPoint[], point: CanvasPoint): CanvasPoint[] => {
+  const last = path.at(-1)
+  return last?.x === point.x && last.y === point.y ? [...path] : [...path, { ...point }]
 }
 
+export const shouldClosePolygonLasso = (path: readonly CanvasPoint[], point: CanvasPoint, clickCount: number): boolean =>
+  path.length >= 3 && (clickCount >= 2 || (path[0].x === point.x && path[0].y === point.y))
+
+export const polygonLassoPreviewPoints = (
+  path: readonly CanvasPoint[],
+  pointer: CanvasPoint,
+  closePreview: boolean,
+  balanced = false
+): CanvasPoint[] => {
+  if (path.length === 0) return []
+  const linePoints = balanced ? balancedStairLinePoints : rasterLinePoints
+  const points: CanvasPoint[] = []
+  for (let index = 1; index < path.length; index += 1) points.push(...linePoints(path[index - 1], path[index]))
+  points.push(...linePoints(path.at(-1)!, pointer))
+  if (closePreview && path.length > 1) points.push(...linePoints(pointer, path[0]))
+  return points
+}
+
+export const polygonLassoClosedPathPoints = (path: readonly CanvasPoint[], balanced = false): CanvasPoint[] => {
+  if (path.length < 2) return path.map((point) => ({ ...point }))
+  const linePoints = balanced ? balancedStairLinePoints : rasterLinePoints
+  const points: CanvasPoint[] = []
+  for (let index = 1; index < path.length; index += 1) points.push(...linePoints(path[index - 1], path[index]))
+  points.push(...linePoints(path.at(-1)!, path[0]))
+  return points
+}
+
+export const shouldRestartFloatingSelectionForCopy = (_floatingCopy: boolean, copyRequested: boolean): boolean =>
+  copyRequested
+
+export const finalizeMarqueeSelection = (
+  before: SelectionMask | null,
+  preview: SelectionMask | null,
+  moved: boolean,
+  mode: SelectionMode
+): SelectionMask | null => moved ? preview : mode === 'replace' ? null : before
+
 export interface CanvasPointerState {
   point: CanvasPoint
   clientX: number
@@ -132,6 +227,7 @@ export class CanvasInputState {
   sampling = false
   altHeld = false
   ctrlHeld = false
+  shiftHeld = false
   spaceHeld = false
   shiftLinePreview = false
   modifierBrushSize: { x: number; y: number; size: number } | null = null
@@ -161,9 +257,10 @@ export class CanvasInputState {
     this.modifierBrushSize = null
   }
 
-  syncModifierKeys(event: Pick<PointerEvent, 'altKey' | 'ctrlKey'>): void {
+  syncModifierKeys(event: Pick<PointerEvent, 'altKey' | 'ctrlKey' | 'shiftKey'>): void {
     this.altHeld = event.altKey
     this.ctrlHeld = event.ctrlKey
+    this.shiftHeld = event.shiftKey
   }
 }
 
@@ -261,21 +358,22 @@ export const selectionInteractionHit = (
   )
   if (resizeHit) return resizeHit
 
-  const left = selection.x
-  const top = selection.y
-  const right = selection.x + selection.width
-  const bottom = selection.y + selection.height
   const rotationHit = selectionRotationHit(selection, point, 1 / safeZoom)
   if (rotationHit) return rotationHit
 
-  const edgeOuterRadius = 9 / safeZoom
-  const edgeInnerRadius = 7 / safeZoom
-  const spansHorizontalEdge = point.x >= left - edgeOuterRadius && point.x <= right + edgeOuterRadius
-  const spansVerticalEdge = point.y >= top - edgeOuterRadius && point.y <= bottom + edgeOuterRadius
-  const nearHorizontalEdge = spansHorizontalEdge && ((point.y >= top - edgeOuterRadius && point.y <= top + edgeInnerRadius) || (point.y >= bottom - edgeInnerRadius && point.y <= bottom + edgeOuterRadius))
-  const nearVerticalEdge = spansVerticalEdge && ((point.x >= left - edgeOuterRadius && point.x <= left + edgeInnerRadius) || (point.x >= right - edgeInnerRadius && point.x <= right + edgeOuterRadius))
-  if (nearHorizontalEdge || nearVerticalEdge) return 'edge'
-  if (point.x < left || point.x > right || point.y < top || point.y > bottom) return 'outside'
+  const edgeRadius = 8 / safeZoom
+  const localX = point.x - selection.x
+  const localY = point.y - selection.y
+  const segments = cachedSelectionBoundarySegments(selection)
+  for (let index = 0; index < segments.length; index += 4) {
+    const x1 = segments[index]
+    const y1 = segments[index + 1]
+    const x2 = segments[index + 2]
+    const y2 = segments[index + 3]
+    const closestX = Math.max(Math.min(x1, x2), Math.min(Math.max(x1, x2), localX))
+    const closestY = Math.max(Math.min(y1, y2), Math.min(Math.max(y1, y2), localY))
+    if (Math.hypot(localX - closestX, localY - closestY) <= edgeRadius) return 'edge'
+  }
   return selectionContains(selection, Math.floor(point.x), Math.floor(point.y)) ? 'inside' : 'outside'
 }
 
@@ -292,18 +390,25 @@ export const selectionTransformModifiers = (
 export const snapSelectionRotation = (angle: number, enabled: boolean): number =>
   enabled ? Math.round(angle / 45) * 45 : angle
 
-export const shapeBounds = (start: CanvasPoint, end: CanvasPoint, constrain = false): SelectionRect => {
-  if (!constrain) {
+export const shapeBounds = (start: CanvasPoint, end: CanvasPoint, constrain = false, fixedRatio: ShapeRatio | null = null): SelectionRect => {
+  const ratio = fixedRatio && Number.isFinite(fixedRatio.width) && Number.isFinite(fixedRatio.height)
+    ? Math.max(0.001, fixedRatio.width / fixedRatio.height)
+    : constrain ? 1 : null
+  if (ratio === null) {
     const x = Math.min(start.x, end.x)
     const y = Math.min(start.y, end.y)
     return { x, y, width: Math.abs(end.x - start.x) + 1, height: Math.abs(end.y - start.y) + 1 }
   }
   const deltaX = end.x - start.x
   const deltaY = end.y - start.y
-  const distance = Math.max(Math.abs(deltaX), Math.abs(deltaY))
+  const absoluteX = Math.abs(deltaX)
+  const absoluteY = Math.abs(deltaY)
+  const widthMajor = absoluteX / ratio >= absoluteY
+  const widthDistance = widthMajor ? absoluteX : Math.round(absoluteY * ratio)
+  const heightDistance = widthMajor ? Math.round(absoluteX / ratio) : absoluteY
   return shapeBounds(start, {
-    x: start.x + (deltaX < 0 ? -distance : distance),
-    y: start.y + (deltaY < 0 ? -distance : distance)
+    x: start.x + (deltaX < 0 ? -widthDistance : widthDistance),
+    y: start.y + (deltaY < 0 ? -heightDistance : heightDistance)
   })
 }
 
diff --git a/src/renderer/src/core/canvas-render-plan.test.ts b/src/renderer/src/core/canvas-render-plan.test.ts
index 894b7ea..8b5d0dc 100644
--- a/src/renderer/src/core/canvas-render-plan.test.ts
+++ b/src/renderer/src/core/canvas-render-plan.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import type { ViewState } from '@shared/types'
-import { createCanvasRenderPlan } from './canvas-render-plan'
+import { createCanvasRenderPlan, deviceAlignedPixelRect } from './canvas-render-plan'
 
 const view = (overrides: Partial<ViewState> = {}): ViewState => ({
   zoom: 4,
@@ -15,6 +15,14 @@ const view = (overrides: Partial<ViewState> = {}): ViewState => ({
 })
 
 describe('createCanvasRenderPlan', () => {
+  it('shares device-pixel boundaries between adjacent preview pixels', () => {
+    const first = deviceAlignedPixelRect(10.2, 12.4, 3.13, 0, 0, 1.5)
+    const second = deviceAlignedPixelRect(10.2, 12.4, 3.13, 1, 0, 1.5)
+    expect(first.x + first.width).toBe(second.x)
+    expect(first.x * 1.5).toBe(Math.round(first.x * 1.5))
+    expect(second.x * 1.5).toBe(Math.round(second.x * 1.5))
+  })
+
   it('computes the visible document rectangle for an unrotated view', () => {
     const plan = createCanvasRenderPlan(320, 240, { width: 128, height: 128 }, view(), 'view')
     expect(plan.rotated).toBe(false)
diff --git a/src/renderer/src/core/canvas-render-plan.ts b/src/renderer/src/core/canvas-render-plan.ts
index d209a9f..c3bb868 100644
--- a/src/renderer/src/core/canvas-render-plan.ts
+++ b/src/renderer/src/core/canvas-render-plan.ts
@@ -21,6 +21,18 @@ export interface CanvasRenderPlan {
   toY: number
 }
 
+export interface DeviceAlignedPixelRect { x: number; y: number; width: number; height: number }
+
+export function deviceAlignedPixelRect(originX: number, originY: number, zoom: number, pixelX: number, pixelY: number, devicePixelRatio: number): DeviceAlignedPixelRect {
+  const dpr = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1
+  const align = (value: number): number => Math.round(value * dpr) / dpr
+  const left = align(originX + pixelX * zoom)
+  const top = align(originY + pixelY * zoom)
+  const right = align(originX + (pixelX + 1) * zoom)
+  const bottom = align(originY + (pixelY + 1) * zoom)
+  return { x: left, y: top, width: Math.max(1 / dpr, right - left), height: Math.max(1 / dpr, bottom - top) }
+}
+
 export function createCanvasRenderPlan(
   viewportWidth: number,
   viewportHeight: number,
diff --git a/src/renderer/src/core/canvas-visuals.test.ts b/src/renderer/src/core/canvas-visuals.test.ts
index 9777e39..323a4cf 100644
--- a/src/renderer/src/core/canvas-visuals.test.ts
+++ b/src/renderer/src/core/canvas-visuals.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { canvasCursors, canvasStatusTextColor, canvasToolCursor, selectionPreviewPixels, selectionTransformDragCursor, transparencyColorAt } from './canvas-visuals'
+import { canvasCursors, canvasStatusTextColor, canvasToolCursor, selectionCreationCursor, selectionCursorCornerRects, selectionPathPreviewPixelVisible, selectionPreviewPixels, selectionTransformDragCursor, transparencyColorAt } from './canvas-visuals'
 
 describe('canvas visual rules', () => {
   it('chooses a visible cursor from the sampled canvas color', () => {
@@ -22,12 +22,41 @@ describe('canvas visual rules', () => {
     expect(canvasStatusTextColor([{ r: 245, g: 245, b: 245, a: 255 }, { r: 210, g: 214, b: 220, a: 255 }])).toBe('#111318')
   })
 
+  it('places compact selection marks at all four corners of the current pixel', () => {
+    const marks = selectionCursorCornerRects({ x: 10, y: 20, width: 16, height: 16 }, 2)
+    expect(marks).toHaveLength(8)
+    expect(marks[0]).toEqual({ x: 10, y: 20, width: 4, height: 1 })
+    expect(marks.at(-1)).toEqual({ x: 25, y: 32, width: 1, height: 4 })
+  })
+
+  it('keeps selection marks at least 8 CSS pixels wide with a fixed line width', () => {
+    const marks = selectionCursorCornerRects({ x: 10, y: 20, width: 2, height: 3 }, 2)
+    expect(Math.min(...marks.map((mark) => mark.x))).toBe(7)
+    expect(Math.max(...marks.map((mark) => mark.x + mark.width))).toBe(15)
+    expect(Math.min(...marks.map((mark) => mark.y))).toBe(17.5)
+    expect(Math.max(...marks.map((mark) => mark.y + mark.height))).toBe(25.5)
+    expect(marks.every((mark) => mark.width === 1 || mark.height === 1)).toBe(true)
+  })
+
   it('uses the move cursor while dragging a selection transform', () => {
     expect(selectionTransformDragCursor('transform-content')).toBe(canvasCursors.move)
     expect(selectionTransformDragCursor('rotate-content')).toBe(canvasCursors.move)
     expect(selectionTransformDragCursor('marquee')).toBeNull()
   })
 
+  it('clips selection creation preview pixels to the document', () => {
+    const pixelRect = { x: 12, y: 20, width: 8, height: 8 }
+    expect(selectionPathPreviewPixelVisible(pixelRect, 100, 80, false)).toBe(false)
+    expect(selectionPathPreviewPixelVisible({ ...pixelRect, x: 120 }, 100, 80, true)).toBe(false)
+    expect(selectionPathPreviewPixelVisible(pixelRect, 100, 80, true)).toBe(true)
+  })
+
+  it('uses only corner marks by default and an actual crosshair when requested', () => {
+    expect(selectionCreationCursor(false)).toBe('none')
+    expect(selectionCreationCursor(true)).toBe(canvasCursors.crosshair)
+    expect(selectionCreationCursor(false, false)).toBe(canvasCursors.unavailable)
+  })
+
   it('returns only the outer boundary for irregular masked selections', () => {
     const pixels = selectionPreviewPixels({ x: 3, y: 5, width: 2, height: 2, mask: Uint8Array.from([1, 1, 1, 0]) })
     expect([...pixels].sort()).toEqual(['3:5', '3:6', '4:5'])
diff --git a/src/renderer/src/core/canvas-visuals.ts b/src/renderer/src/core/canvas-visuals.ts
index b50916b..8fd5c62 100644
--- a/src/renderer/src/core/canvas-visuals.ts
+++ b/src/renderer/src/core/canvas-visuals.ts
@@ -15,6 +15,9 @@ export const rotationCursors: Record<SelectionRotationHandle, string> = { 'rotat
 export const selectionTransformDragCursor = (kind: string): string | null =>
   kind === 'transform-content' || kind === 'rotate-content' ? canvasCursors.move : null
 
+export const selectionCreationCursor = (showCrosshair: boolean, available = true): string =>
+  available ? showCrosshair ? canvasCursors.crosshair : 'none' : canvasCursors.unavailable
+
 export const colorLuminance = (color: RgbaColor): number => color.r * 0.2126 + color.g * 0.7152 + color.b * 0.0722
 
 export const canvasStatusTextColor = (backgrounds: RgbaColor[]): '#111318' | '#f1f4f8' => {
@@ -24,6 +27,42 @@ export const canvasStatusTextColor = (backgrounds: RgbaColor[]): '#111318' | '#f
   return luminance > 145 ? '#111318' : '#f1f4f8'
 }
 
+export interface VisualRect { x: number; y: number; width: number; height: number }
+
+export const selectionPathPreviewPixelVisible = (
+  pixel: VisualRect,
+  viewportWidth: number,
+  viewportHeight: number,
+  insideDocument: boolean
+): boolean => insideDocument
+  && pixel.x + pixel.width > 0
+  && pixel.y + pixel.height > 0
+  && pixel.x < viewportWidth
+  && pixel.y < viewportHeight
+
+export const selectionCursorCornerRects = (pixel: VisualRect, devicePixelRatio = 1): VisualRect[] => {
+  const dpr = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1
+  const align = (value: number): number => Math.round(value * dpr) / dpr
+  const visualWidth = Math.max(8, pixel.width)
+  const visualHeight = Math.max(8, pixel.height)
+  const left = align(pixel.x + (pixel.width - visualWidth) / 2)
+  const top = align(pixel.y + (pixel.height - visualHeight) / 2)
+  const right = align(left + visualWidth)
+  const bottom = align(top + visualHeight)
+  const arm = Math.max(2, Math.min(4, Math.floor(Math.min(visualWidth, visualHeight) / 4)))
+  const stroke = 1
+  return [
+    { x: left, y: top, width: arm, height: stroke },
+    { x: left, y: top, width: stroke, height: arm },
+    { x: right - arm, y: top, width: arm, height: stroke },
+    { x: right - stroke, y: top, width: stroke, height: arm },
+    { x: left, y: bottom - stroke, width: arm, height: stroke },
+    { x: left, y: bottom - arm, width: stroke, height: arm },
+    { x: right - arm, y: bottom - stroke, width: arm, height: stroke },
+    { x: right - stroke, y: bottom - arm, width: stroke, height: arm }
+  ]
+}
+
 export const transparencyColorAt = (pixelX: number, pixelY: number, checkerboard: CheckerboardPreferences = DEFAULT_CHECKERBOARD_PREFERENCES): RgbaColor =>
   (Math.floor(pixelX / checkerboard.size) + Math.floor(pixelY / checkerboard.size)) % 2 === 0
     ? checkerboard.lightColor
diff --git a/src/renderer/src/core/clipboard-placement.test.ts b/src/renderer/src/core/clipboard-placement.test.ts
new file mode 100644
index 0000000..6a8c094
--- /dev/null
+++ b/src/renderer/src/core/clipboard-placement.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { resolveClipboardPlacement } from './clipboard-placement'
+
+const view = { zoom: 10, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false, showGrid: false, relativeLuminance: false }
+
+describe('clipboard placement', () => {
+  it('keeps a copied origin that remains visible', () => {
+    expect(resolveClipboardPlacement({ width: 4, height: 4, originX: 8, originY: 6, documentWidth: 20, documentHeight: 20, viewportWidth: 200, viewportHeight: 200, view, rotationIndicatorPosition: 'view' })).toEqual({ x: 8, y: 6 })
+  })
+
+  it('centers content in the visible view when its origin is outside', () => {
+    expect(resolveClipboardPlacement({ width: 4, height: 2, originX: 100, originY: 100, documentWidth: 20, documentHeight: 20, viewportWidth: 200, viewportHeight: 200, view, rotationIndicatorPosition: 'view' })).toEqual({ x: 8, y: 9 })
+  })
+
+  it('uses the panned view center instead of the document center', () => {
+    expect(resolveClipboardPlacement({ width: 4, height: 4, documentWidth: 20, documentHeight: 20, viewportWidth: 100, viewportHeight: 100, view: { ...view, panX: -50 }, rotationIndicatorPosition: 'view' })).toEqual({ x: 13, y: 8 })
+  })
+})
diff --git a/src/renderer/src/core/clipboard-placement.ts b/src/renderer/src/core/clipboard-placement.ts
new file mode 100644
index 0000000..a1ab339
--- /dev/null
+++ b/src/renderer/src/core/clipboard-placement.ts
@@ -0,0 +1,37 @@
+import type { ViewState } from '@shared/types'
+import type { RotationIndicatorPosition } from './file-preferences'
+import { unrotatedViewportBounds, viewCanvasOrigin } from './view-geometry'
+
+export interface ClipboardPlacementInput {
+  width: number
+  height: number
+  originX?: number
+  originY?: number
+  documentWidth: number
+  documentHeight: number
+  viewportWidth: number
+  viewportHeight: number
+  view: ViewState
+  rotationIndicatorPosition: RotationIndicatorPosition
+}
+
+export function resolveClipboardPlacement(input: ClipboardPlacementInput): { x: number; y: number } {
+  const viewport = unrotatedViewportBounds(input.viewportWidth, input.viewportHeight, input.view, input.rotationIndicatorPosition)
+  const origin = viewCanvasOrigin(input.viewportWidth, input.viewportHeight, input.documentWidth, input.documentHeight, input.view)
+  const visible = {
+    left: (viewport.left - origin.x) / input.view.zoom,
+    top: (viewport.top - origin.y) / input.view.zoom,
+    right: (viewport.right - origin.x) / input.view.zoom,
+    bottom: (viewport.bottom - origin.y) / input.view.zoom
+  }
+  if (input.originX !== undefined && input.originY !== undefined) {
+    const original = { left: input.originX, top: input.originY, right: input.originX + input.width, bottom: input.originY + input.height }
+    if (original.right > visible.left && original.left < visible.right && original.bottom > visible.top && original.top < visible.bottom) {
+      return { x: input.originX, y: input.originY }
+    }
+  }
+  return {
+    x: Math.floor((visible.left + visible.right - input.width) / 2),
+    y: Math.floor((visible.top + visible.bottom - input.height) / 2)
+  }
+}
diff --git a/src/renderer/src/core/command-context.test.ts b/src/renderer/src/core/command-context.test.ts
new file mode 100644
index 0000000..20543da
--- /dev/null
+++ b/src/renderer/src/core/command-context.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { resolveCopyCommand, resolveDeleteCommand, shouldHandleGlobalSelectionEnter, shouldTriggerDeleteCommand } from './command-context'
+
+describe('command context', () => {
+  it('routes Delete to the last active editor surface', () => {
+    expect(resolveDeleteCommand('canvas', true)).toBe('selection')
+    expect(resolveDeleteCommand('layers', true)).toBe('layers')
+    expect(resolveDeleteCommand('palette', true)).toBe('palette')
+  })
+
+  it('adds Backspace as an alias without bypassing the configured Delete shortcut', () => {
+    expect(shouldTriggerDeleteCommand(true, 'Delete')).toBe(true)
+    expect(shouldTriggerDeleteCommand(false, 'Backspace')).toBe(true)
+    expect(shouldTriggerDeleteCommand(false, 'Delete')).toBe(false)
+    expect(shouldTriggerDeleteCommand(false, 'Enter')).toBe(false)
+  })
+
+  it('routes Copy to layers even while a canvas selection remains', () => {
+    expect(resolveCopyCommand('layers', true)).toBe('layers')
+    expect(resolveCopyCommand('canvas', true)).toBe('selection')
+    expect(resolveCopyCommand('palette', true)).toBeNull()
+  })
+
+  it('gives an open outline dialog exclusive ownership of Enter', () => {
+    expect(shouldHandleGlobalSelectionEnter(true, true)).toBe(false)
+    expect(shouldHandleGlobalSelectionEnter(false, true)).toBe(true)
+    expect(shouldHandleGlobalSelectionEnter(false, false)).toBe(false)
+  })
+})
diff --git a/src/renderer/src/core/command-context.ts b/src/renderer/src/core/command-context.ts
new file mode 100644
index 0000000..ad7f22c
--- /dev/null
+++ b/src/renderer/src/core/command-context.ts
@@ -0,0 +1,21 @@
+export type EditorCommandScope = 'canvas' | 'layers' | 'palette'
+
+export type DeleteCommandTarget = 'selection' | 'layers' | 'palette' | null
+export type CopyCommandTarget = 'selection' | 'layers' | null
+
+export function resolveDeleteCommand(scope: EditorCommandScope, hasSelection: boolean): DeleteCommandTarget {
+  if (scope === 'layers') return 'layers'
+  if (scope === 'palette') return 'palette'
+  return hasSelection ? 'selection' : null
+}
+
+export function resolveCopyCommand(scope: EditorCommandScope, hasSelection: boolean): CopyCommandTarget {
+  if (scope === 'layers') return 'layers'
+  return scope === 'canvas' && hasSelection ? 'selection' : null
+}
+
+export const shouldTriggerDeleteCommand = (configuredShortcutMatches: boolean, key: string): boolean =>
+  configuredShortcutMatches || key === 'Backspace'
+
+export const shouldHandleGlobalSelectionEnter = (outlineOpen: boolean, hasSelection: boolean): boolean =>
+  !outlineOpen && hasSelection
diff --git a/src/renderer/src/core/document-drop.test.ts b/src/renderer/src/core/document-drop.test.ts
index b9122fb..e2e5837 100644
--- a/src/renderer/src/core/document-drop.test.ts
+++ b/src/renderer/src/core/document-drop.test.ts
@@ -30,4 +30,14 @@ describe('document drop paths', () => {
       'D:\\Art\\reference.gif'
     ])).toHaveLength(6)
   })
+
+  it('accepts Aseprite documents from the native desktop drop event', () => {
+    expect(normalizeDroppedDocumentPaths([
+      'D:\\Art\\sprite.ase',
+      'D:\\Art\\animated.aseprite'
+    ])).toEqual([
+      'D:\\Art\\sprite.ase',
+      'D:\\Art\\animated.aseprite'
+    ])
+  })
 })
diff --git a/src/renderer/src/core/document.ts b/src/renderer/src/core/document.ts
index 473e924..16b5a38 100644
--- a/src/renderer/src/core/document.ts
+++ b/src/renderer/src/core/document.ts
@@ -190,19 +190,34 @@ export const getLayerIdsInGroup = (document: SpriteDocument, groupId: string): s
   const groupIds = new Set([groupId, ...getDescendantGroupIds(document, groupId)])
   return document.layers.filter((layer) => Boolean(layer.groupId && groupIds.has(layer.groupId))).map((layer) => layer.id)
 }
-export const isLayerEffectivelyLocked = (document: SpriteDocument, layer: RasterLayer): boolean => {
-  if (layer.locked) return true
+export const getLayerLockingGroup = (document: SpriteDocument, layer: RasterLayer): LayerGroup | null => {
   const visited = new Set<string>()
   let groupId = layer.groupId ?? null
   while (groupId && !visited.has(groupId)) {
     visited.add(groupId)
     const group = document.groups.find((candidate) => candidate.id === groupId)
-    if (!group) return false
-    if (group.locked) return true
+    if (!group) return null
+    if (group.locked) return group
     groupId = group.parentGroupId ?? null
   }
-  return false
+  return null
 }
+
+export const getGroupLockingAncestor = (document: SpriteDocument, group: LayerGroup): LayerGroup | null => {
+  const visited = new Set<string>([group.id])
+  let groupId = group.parentGroupId ?? null
+  while (groupId && !visited.has(groupId)) {
+    visited.add(groupId)
+    const parent = document.groups.find((candidate) => candidate.id === groupId)
+    if (!parent) return null
+    if (parent.locked) return parent
+    groupId = parent.parentGroupId ?? null
+  }
+  return null
+}
+
+export const isLayerEffectivelyLocked = (document: SpriteDocument, layer: RasterLayer): boolean => layer.locked || Boolean(getLayerLockingGroup(document, layer))
+export const isGroupEffectivelyLocked = (document: SpriteDocument, group: LayerGroup): boolean => group.locked || Boolean(getGroupLockingAncestor(document, group))
 export const isLayerEffectivelyVisible = (document: SpriteDocument, layer: RasterLayer): boolean => {
   if (!layer.visible) return false
   const visited = new Set<string>()
diff --git a/src/renderer/src/core/file-preferences.test.ts b/src/renderer/src/core/file-preferences.test.ts
index f818cf2..67d8c26 100644
--- a/src/renderer/src/core/file-preferences.test.ts
+++ b/src/renderer/src/core/file-preferences.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { BRUSH_SHIFT_LINE_ENABLED_KEY, EXPORT_FORMAT_PREFERENCE_KEY, NEW_DOCUMENT_SIZE_PRESETS_KEY, RECOVERY_MINUTES_PREFERENCE_KEY, SAVE_FORMAT_PREFERENCE_KEY, ZOOM_TOOL_DRAG_MODE_PREFERENCE_KEY, imageExportKindForPreference, loadEditorPreferences, parseBrushPreviewMode, parseBrushShiftLineEnabled, parseCheckerSize, parseCursorScale, parseDocumentSizePresets, parseDrawingBrushPreviewEnabled, parseExportScalePresets, parseRelativeLuminanceScope, parseZoomToolDragMode, saveEditorPreferences, saveImageKindForPreference } from './file-preferences'
+import { BRUSH_SHIFT_LINE_ENABLED_KEY, EXPORT_FORMAT_PREFERENCE_KEY, LAYER_DISPLAY_COLOR_PRESETS_KEY, NEW_DOCUMENT_SIZE_PRESETS_KEY, RECOVERY_MINUTES_PREFERENCE_KEY, SAVE_FORMAT_PREFERENCE_KEY, ZOOM_TOOL_DRAG_MODE_PREFERENCE_KEY, imageExportKindForPreference, loadEditorPreferences, parseBrushPreviewMode, parseBrushShiftLineEnabled, parseCheckerSize, parseCursorScale, parseDocumentSizePresets, parseDrawingBrushPreviewEnabled, parseExportScalePresets, parseLayerDisplayColorPresets, parseRelativeLuminanceScope, parseZoomToolDragMode, saveEditorPreferences, saveImageKindForPreference } from './file-preferences'
 
 describe('file format preferences', () => {
   it('maps export formats to encoder kinds', () => {
@@ -26,6 +26,13 @@ describe('file format preferences', () => {
     expect(parseDocumentSizePresets('[]').length).toBeGreaterThan(0)
     expect(parseExportScalePresets('invalid')).toContain(100)
   })
+
+  it('validates, deduplicates and limits layer display color presets', () => {
+    const colors = Array.from({ length: 14 }, (_, index) => ({ r: index, g: index + 1, b: index + 2, a: 100 }))
+    expect(parseLayerDisplayColorPresets(JSON.stringify([colors[0], colors[0], { r: -1, g: 0, b: 0 }, ...colors.slice(1)]))).toHaveLength(12)
+    expect(parseLayerDisplayColorPresets(JSON.stringify([colors[0]]))).toEqual([{ r: 0, g: 1, b: 2, a: 255 }])
+    expect(parseLayerDisplayColorPresets('[]').length).toBeGreaterThan(0)
+  })
 })
 
 describe('canvas preferences', () => {
@@ -83,6 +90,11 @@ describe('editor preferences persistence boundary', () => {
     expect(defaults.brushPreviewMode).toBe('full-edge')
     expect(defaults.checkerboard.size).toBe(16)
     expect(defaults.wheelZoomEnabled).toBe(true)
+    expect(defaults.lassoPreviewClosed).toBe(false)
+    expect(defaults.eyedropperSwitchToPencil).toBe(false)
+    expect(defaults.selectionCrosshair).toBe(false)
+    expect(defaults.balancedShiftLineEnabled).toBe(true)
+    expect(defaults.layerDisplayColorPresets.length).toBeGreaterThan(0)
 
     storage.set(RECOVERY_MINUTES_PREFERENCE_KEY, '999')
     expect(loadEditorPreferences(adapter).recoveryMinutes).toBe(60)
@@ -110,7 +122,7 @@ describe('editor preferences persistence boundary', () => {
     expect(storage.get(ZOOM_TOOL_DRAG_MODE_PREFERENCE_KEY)).toBe('stepped')
     saveEditorPreferences({ ...loadEditorPreferences(adapter), brushShiftLineEnabled: false }, adapter)
     expect(storage.get(BRUSH_SHIFT_LINE_ENABLED_KEY)).toBe('false')
-    saveEditorPreferences({ ...loadEditorPreferences(adapter), useLocalCursors: false, cursorScale: 1.5, brushPreviewMode: 'edge', checkerboard: { size: 8, lightColor: { r: 1, g: 2, b: 3, a: 255 }, darkColor: { r: 4, g: 5, b: 6, a: 255 } }, wheelZoomEnabled: false, shiftLinePreviewEnabled: false }, adapter)
+    saveEditorPreferences({ ...loadEditorPreferences(adapter), useLocalCursors: false, cursorScale: 1.5, brushPreviewMode: 'edge', checkerboard: { size: 8, lightColor: { r: 1, g: 2, b: 3, a: 255 }, darkColor: { r: 4, g: 5, b: 6, a: 255 } }, wheelZoomEnabled: false, shiftLinePreviewEnabled: false, lassoPreviewClosed: true, eyedropperSwitchToPencil: true, balancedShiftLineEnabled: false, layerDisplayColorPresets: [{ r: 12, g: 34, b: 56, a: 99 }] }, adapter)
     const customized = loadEditorPreferences(adapter)
     expect(customized.useLocalCursors).toBe(false)
     expect(customized.cursorScale).toBe(1.5)
@@ -118,5 +130,10 @@ describe('editor preferences persistence boundary', () => {
     expect(customized.checkerboard).toEqual({ size: 8, lightColor: { r: 1, g: 2, b: 3, a: 255 }, darkColor: { r: 4, g: 5, b: 6, a: 255 } })
     expect(customized.wheelZoomEnabled).toBe(false)
     expect(customized.shiftLinePreviewEnabled).toBe(false)
+    expect(customized.lassoPreviewClosed).toBe(true)
+    expect(customized.eyedropperSwitchToPencil).toBe(true)
+    expect(customized.balancedShiftLineEnabled).toBe(false)
+    expect(customized.layerDisplayColorPresets).toEqual([{ r: 12, g: 34, b: 56, a: 255 }])
+    expect(storage.has(LAYER_DISPLAY_COLOR_PRESETS_KEY)).toBe(true)
   })
 })
diff --git a/src/renderer/src/core/file-preferences.ts b/src/renderer/src/core/file-preferences.ts
index 52e861c..1435fc3 100644
--- a/src/renderer/src/core/file-preferences.ts
+++ b/src/renderer/src/core/file-preferences.ts
@@ -22,6 +22,11 @@ export const CHECKER_LIGHT_COLOR_PREFERENCE_KEY = 'moonsprite.preference.checker
 export const CHECKER_DARK_COLOR_PREFERENCE_KEY = 'moonsprite.preference.checker-dark-color'
 export const WHEEL_ZOOM_ENABLED_PREFERENCE_KEY = 'moonsprite.preference.wheel-zoom-enabled'
 export const SHIFT_LINE_PREVIEW_ENABLED_PREFERENCE_KEY = 'moonsprite.preference.shift-line-preview-enabled'
+export const LASSO_PREVIEW_CLOSED_PREFERENCE_KEY = 'moonsprite.preference.lasso-preview-closed'
+export const EYEDROPPER_SWITCH_TO_PENCIL_PREFERENCE_KEY = 'moonsprite.preference.eyedropper-switch-to-pencil'
+export const SELECTION_CROSSHAIR_PREFERENCE_KEY = 'moonsprite.preference.selection-crosshair'
+export const BALANCED_SHIFT_LINE_ENABLED_PREFERENCE_KEY = 'moonsprite.preference.balanced-shift-line-enabled'
+export const LAYER_DISPLAY_COLOR_PRESETS_KEY = 'moonsprite.preference.layer-display-color-presets'
 
 export type RotationIndicatorPosition = 'view' | 'canvas'
 export type RelativeLuminanceScope = 'canvas' | 'app'
@@ -101,6 +106,15 @@ export const DEFAULT_DOCUMENT_SIZE_PRESETS: DocumentSizePreset[] = [
   { width: 128, height: 128 }, { width: 256, height: 256 }, { width: 320, height: 180 }
 ]
 export const DEFAULT_EXPORT_SCALE_PRESETS = [100, 200, 400, 1000, 2000]
+export const DEFAULT_LAYER_DISPLAY_COLOR_PRESETS: RgbaColor[] = [
+  { r: 239, g: 83, b: 80, a: 255 },
+  { r: 255, g: 167, b: 38, a: 255 },
+  { r: 253, g: 216, b: 53, a: 255 },
+  { r: 102, g: 187, b: 106, a: 255 },
+  { r: 38, g: 198, b: 218, a: 255 },
+  { r: 41, g: 121, b: 255, a: 255 },
+  { r: 171, g: 71, b: 188, a: 255 }
+]
 
 export type SaveFormatPreference = 'moonsprite' | 'png' | 'jpeg' | 'webp' | 'ase' | 'aseprite'
 export type ExportFormatPreference = 'png' | 'jpeg' | 'webp' | 'svg'
@@ -124,6 +138,11 @@ export interface EditorPreferences {
   checkerboard: CheckerboardPreferences
   wheelZoomEnabled: boolean
   shiftLinePreviewEnabled: boolean
+  lassoPreviewClosed: boolean
+  eyedropperSwitchToPencil: boolean
+  selectionCrosshair: boolean
+  balancedShiftLineEnabled: boolean
+  layerDisplayColorPresets: RgbaColor[]
 }
 
 export const DEFAULT_EDITOR_PREFERENCES: EditorPreferences = {
@@ -144,7 +163,12 @@ export const DEFAULT_EDITOR_PREFERENCES: EditorPreferences = {
   brushPreviewMode: 'full-edge',
   checkerboard: DEFAULT_CHECKERBOARD_PREFERENCES,
   wheelZoomEnabled: true,
-  shiftLinePreviewEnabled: true
+  shiftLinePreviewEnabled: true,
+  lassoPreviewClosed: false,
+  eyedropperSwitchToPencil: false,
+  selectionCrosshair: false,
+  balancedShiftLineEnabled: true,
+  layerDisplayColorPresets: DEFAULT_LAYER_DISPLAY_COLOR_PRESETS
 }
 
 const boundedInteger = (value: unknown, max: number): number | null => {
@@ -182,6 +206,31 @@ export function parseExportScalePresets(value: string | null): number[] {
   }
 }
 
+export function parseLayerDisplayColorPresets(value: string | null): RgbaColor[] {
+  const fallback = (): RgbaColor[] => DEFAULT_LAYER_DISPLAY_COLOR_PRESETS.map((color) => ({ ...color }))
+  try {
+    const parsed = JSON.parse(value ?? 'null') as unknown
+    if (!Array.isArray(parsed)) return fallback()
+    const seen = new Set<string>()
+    const colors: RgbaColor[] = []
+    for (const candidate of parsed) {
+      if (!candidate || typeof candidate !== 'object') continue
+      const value = candidate as Partial<RgbaColor>
+      const channels = [value.r, value.g, value.b]
+      if (channels.some((channel) => typeof channel !== 'number' || !Number.isFinite(channel) || channel < 0 || channel > 255)) continue
+      const color = { r: Math.round(value.r!), g: Math.round(value.g!), b: Math.round(value.b!), a: 255 }
+      const key = `${color.r}:${color.g}:${color.b}`
+      if (seen.has(key)) continue
+      seen.add(key)
+      colors.push(color)
+      if (colors.length === 12) break
+    }
+    return colors.length > 0 ? colors : fallback()
+  } catch {
+    return fallback()
+  }
+}
+
 export function imageExportKindForPreference(value: string | null): ImageExportKind {
   if (value === 'jpeg') return 'jpeg'
   if (value === 'webp') return 'webp'
@@ -237,7 +286,12 @@ export function loadEditorPreferences(storage?: Storage): EditorPreferences {
     brushPreviewMode: parseBrushPreviewMode(get(BRUSH_PREVIEW_MODE_PREFERENCE_KEY)),
     checkerboard: loadCheckerboardPreferences(storage),
     wheelZoomEnabled: get(WHEEL_ZOOM_ENABLED_PREFERENCE_KEY) !== 'false',
-    shiftLinePreviewEnabled: get(SHIFT_LINE_PREVIEW_ENABLED_PREFERENCE_KEY) !== 'false'
+    shiftLinePreviewEnabled: get(SHIFT_LINE_PREVIEW_ENABLED_PREFERENCE_KEY) !== 'false',
+    lassoPreviewClosed: get(LASSO_PREVIEW_CLOSED_PREFERENCE_KEY) === 'true',
+    eyedropperSwitchToPencil: get(EYEDROPPER_SWITCH_TO_PENCIL_PREFERENCE_KEY) === 'true',
+    selectionCrosshair: get(SELECTION_CROSSHAIR_PREFERENCE_KEY) === 'true',
+    balancedShiftLineEnabled: get(BALANCED_SHIFT_LINE_ENABLED_PREFERENCE_KEY) !== 'false',
+    layerDisplayColorPresets: parseLayerDisplayColorPresets(get(LAYER_DISPLAY_COLOR_PRESETS_KEY))
   }
 }
 
@@ -262,7 +316,12 @@ export function saveEditorPreferences(preferences: EditorPreferences, storage?:
     [CHECKER_LIGHT_COLOR_PREFERENCE_KEY]: colorHex(preferences.checkerboard.lightColor),
     [CHECKER_DARK_COLOR_PREFERENCE_KEY]: colorHex(preferences.checkerboard.darkColor),
     [WHEEL_ZOOM_ENABLED_PREFERENCE_KEY]: String(preferences.wheelZoomEnabled),
-    [SHIFT_LINE_PREVIEW_ENABLED_PREFERENCE_KEY]: String(preferences.shiftLinePreviewEnabled)
+    [SHIFT_LINE_PREVIEW_ENABLED_PREFERENCE_KEY]: String(preferences.shiftLinePreviewEnabled),
+    [LASSO_PREVIEW_CLOSED_PREFERENCE_KEY]: String(preferences.lassoPreviewClosed),
+    [EYEDROPPER_SWITCH_TO_PENCIL_PREFERENCE_KEY]: String(preferences.eyedropperSwitchToPencil),
+    [SELECTION_CROSSHAIR_PREFERENCE_KEY]: String(preferences.selectionCrosshair),
+    [BALANCED_SHIFT_LINE_ENABLED_PREFERENCE_KEY]: String(preferences.balancedShiftLineEnabled),
+    [LAYER_DISPLAY_COLOR_PRESETS_KEY]: JSON.stringify(parseLayerDisplayColorPresets(JSON.stringify(preferences.layerDisplayColorPresets)))
   }
   for (const [key, value] of Object.entries(values)) writeStoredString(key, value, storage)
 }
diff --git a/src/renderer/src/core/format.test.ts b/src/renderer/src/core/format.test.ts
index 7ff6418..905f854 100644
--- a/src/renderer/src/core/format.test.ts
+++ b/src/renderer/src/core/format.test.ts
@@ -65,9 +65,9 @@ describe('MoonSprite project format', () => {
     const document = createDocument('groups', 2, 2, 'rgba')
     const layer = getActiveLayer(document)
     layer.groupId = 'group-1'
-    document.groups.push({ id: 'group-1', name: '角色', displayColor: { r: 12, g: 34, b: 56, a: 255 }, description: '角色说明', visible: true, locked: true, opacity: 0.6, blendMode: 'multiply' })
+    document.groups.push({ id: 'group-1', name: '角色', panelOrder: 0.25, displayColor: { r: 12, g: 34, b: 56, a: 255 }, description: '角色说明', visible: true, locked: true, opacity: 0.6, blendMode: 'multiply' })
     const restored = decodeProject(encodeProject(document))
-    expect(restored.groups).toEqual([{ id: 'group-1', name: '角色', displayColor: { r: 12, g: 34, b: 56, a: 255 }, description: '角色说明', visible: true, locked: true, opacity: 0.6, blendMode: 'multiply' }])
+    expect(restored.groups).toEqual([{ id: 'group-1', name: '角色', panelOrder: 0.25, displayColor: { r: 12, g: 34, b: 56, a: 255 }, description: '角色说明', visible: true, locked: true, opacity: 0.6, blendMode: 'multiply' }])
     expect(restored.layers[0].groupId).toBe('group-1')
   })
 
diff --git a/src/renderer/src/core/layer-operations.test.ts b/src/renderer/src/core/layer-operations.test.ts
index 18d8ab6..43757cd 100644
--- a/src/renderer/src/core/layer-operations.test.ts
+++ b/src/renderer/src/core/layer-operations.test.ts
@@ -1,9 +1,11 @@
 import { describe, expect, it } from 'vitest'
+import type { LayerGroup } from '@shared/types'
 import { createDocument, createLayer, getActiveLayer } from './document'
 import { HistoryStack } from './history'
-import { assignLayersToGroup, assignLayersToRoot, canMoveGroupInto, createLayerGroup, reorderGroup, reorderLayers, ungroupSelected, type LayerOperationState } from './layer-operations'
+import { assignLayersToGroup, assignLayersToRoot, canMoveGroupInto, createLayerGroup, moveGroupToRootEdge, moveLayersToRootEdge, positionGroupNextToLayer, reorderGroup, reorderLayers, ungroupSelected, type LayerOperationState } from './layer-operations'
+import { buildLayerPanelTree } from './layer-panel-layout'
 
-const group = (id: string, parentGroupId: string | null = null) => ({ id, name: id, parentGroupId, visible: true, locked: false, opacity: 1, blendMode: 'normal' as const })
+const group = (id: string, parentGroupId: string | null = null): LayerGroup => ({ id, name: id, parentGroupId, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
 
 const createState = (): LayerOperationState => {
   const document = createDocument('layer operations', 2, 2, 'rgba')
@@ -105,4 +107,106 @@ describe('layer operations', () => {
     expect(state.document.groups.map((item) => item.id)).toEqual(['group-created'])
     expect(layer.groupId).toBe('group-created')
   })
+
+  it('creates a group at the original position of the highest selected layer', () => {
+    const state = createState()
+    const bottomSelected = getActiveLayer(state.document)
+    const middle = createLayer('middle', 2, 2, 'rgba')
+    const topSelected = createLayer('top selected', 2, 2, 'rgba')
+    const top = createLayer('top', 2, 2, 'rgba')
+    state.document.layers.push(middle, topSelected, top)
+    state.selectedLayerIds = [bottomSelected.id, topSelected.id]
+
+    createLayerGroup(state, 'group-at-selection', 'Grouped')
+
+    expect(state.document.layers.map((layer) => layer.id)).toEqual([middle.id, bottomSelected.id, topSelected.id, top.id])
+    expect(buildLayerPanelTree({ layers: state.document.layers, groups: state.document.groups }).map((node) => `${node.kind}:${node.id}`)).toEqual([
+      `layer:${top.id}`,
+      'group:group-at-selection',
+      `layer:${topSelected.id}`,
+      `layer:${bottomSelected.id}`,
+      `layer:${middle.id}`
+    ])
+  })
+
+  it('moves layers and groups to visible list edges as one reversible operation', () => {
+    const state = createState()
+    const bottom = getActiveLayer(state.document)
+    const top = createLayer('top', 2, 2, 'rgba')
+    state.document.layers.push(top)
+    const layerMove = moveLayersToRootEdge(state, [bottom.id], 'top')
+    expect(state.document.layers.map((layer) => layer.id)).toEqual([top.id, bottom.id])
+    layerMove?.undo()
+    expect(state.document.layers.map((layer) => layer.id)).toEqual([bottom.id, top.id])
+
+    state.document.groups.push(group('first'), group('second'))
+    const groupMove = moveGroupToRootEdge(state, 'first', 'top')
+    expect(state.document.groups.map((item) => item.id)).toEqual(['second', 'first'])
+    groupMove?.undo()
+    expect(state.document.groups.map((item) => item.id)).toEqual(['first', 'second'])
+  })
+
+  it('moves a root layer above a group with a persisted panel anchor', () => {
+    const state = createState()
+    const member = getActiveLayer(state.document)
+    const root = createLayer('root', 2, 2, 'rgba')
+    member.groupId = 'anchored'
+    state.document.layers.push(root)
+    state.document.groups.push({ ...group('anchored'), panelOrder: 2 })
+
+    expect(buildLayerPanelTree(state.document).map((node) => node.id)).toEqual(['anchored', member.id, root.id])
+    const history = moveLayersToRootEdge(state, [root.id], 'top')
+    expect(buildLayerPanelTree(state.document).map((node) => node.id)).toEqual([root.id, 'anchored', member.id])
+
+    history?.undo()
+    expect(buildLayerPanelTree(state.document).map((node) => node.id)).toEqual(['anchored', member.id, root.id])
+    history?.redo()
+    expect(buildLayerPanelTree(state.document).map((node) => node.id)).toEqual([root.id, 'anchored', member.id])
+  })
+
+  it('moves a root layer below a bottom group with a persisted panel anchor', () => {
+    const state = createState()
+    const member = getActiveLayer(state.document)
+    const root = createLayer('root', 2, 2, 'rgba')
+    member.groupId = 'anchored'
+    state.document.layers.push(root)
+    state.document.groups.push({ ...group('anchored'), panelOrder: -1 })
+
+    const history = moveLayersToRootEdge(state, [root.id], 'bottom')
+
+    expect(buildLayerPanelTree(state.document).map((node) => node.id)).toEqual(['anchored', member.id, root.id])
+    history?.undo()
+    history?.redo()
+    expect(buildLayerPanelTree(state.document).map((node) => node.id)).toEqual(['anchored', member.id, root.id])
+  })
+
+  it('persists and restores an empty group position beside a root layer', () => {
+    const state = createState()
+    const target = getActiveLayer(state.document)
+    const empty = group('empty')
+    state.document.groups.push(empty)
+
+    const move = positionGroupNextToLayer(state, empty.id, target.id, true)
+    expect(empty.panelOrder).toBe(0.25)
+    move?.undo()
+    expect(empty.panelOrder).toBeUndefined()
+    move?.redo()
+    expect(empty.panelOrder).toBe(0.25)
+  })
+
+  it('persists a moved non-empty group panel position', () => {
+    const state = createState()
+    const member = getActiveLayer(state.document)
+    state.document.groups.push(group('first'), group('second'))
+    member.groupId = 'first'
+    const other = createLayer('other', 2, 2, 'rgba')
+    other.groupId = 'second'
+    state.document.layers.push(other)
+
+    const move = reorderGroup(state, 'first', 'second', true)
+
+    expect(state.document.groups.find((item) => item.id === 'first')?.panelOrder).toBeTypeOf('number')
+    move?.undo()
+    expect(state.document.groups.find((item) => item.id === 'first')?.panelOrder).toBeUndefined()
+  })
 })
diff --git a/src/renderer/src/core/layer-operations.ts b/src/renderer/src/core/layer-operations.ts
index fe48996..6424394 100644
--- a/src/renderer/src/core/layer-operations.ts
+++ b/src/renderer/src/core/layer-operations.ts
@@ -1,11 +1,13 @@
 import type { LayerGroup, SpriteDocument } from '@shared/types'
 import { getActiveLayer, getDescendantGroupIds, getGroup, getLayerIdsInGroup } from './document'
 import type { HistoryEntry } from './history'
+import { buildLayerPanelTree, type LayerPanelNode } from './layer-panel-layout'
 
 export interface LayerOperationState {
   document: SpriteDocument
   selectedLayerIds: string[]
   selectedGroupId: string | null
+  selectedGroupIds?: string[]
   collapsedGroupIds?: string[]
 }
 
@@ -15,6 +17,7 @@ const selectLayers = (state: LayerOperationState, layerIds: string[], groupId: s
   if (layerIds.length > 0) state.document.activeLayerId = layerIds.at(-1)!
   state.selectedLayerIds = layerIds
   state.selectedGroupId = groupId
+  state.selectedGroupIds = groupId ? [groupId] : []
 }
 
 const applyLayerOrder = (document: SpriteDocument, layerById: Map<string, SpriteDocument['layers'][number]>, order: string[], activeLayerId: string): void => {
@@ -26,6 +29,57 @@ const applyLayerGroups = (layers: SpriteDocument['layers'], groupIds: Map<string
   for (const layer of layers) if (groupIds.has(layer.id)) layer.groupId = groupIds.get(layer.id) ?? null
 }
 
+const applyGroupOrder = (document: SpriteDocument, groupById: Map<string, LayerGroup>, order: string[]): void => {
+  document.groups = order.map((id) => groupById.get(id)).filter((group): group is LayerGroup => Boolean(group))
+}
+
+const applyGroupPanelOrders = (groups: readonly LayerGroup[], panelOrders: ReadonlyMap<string, number | undefined>): void => {
+  for (const group of groups) if (panelOrders.has(group.id)) group.panelOrder = panelOrders.get(group.id)
+}
+
+const rootPanelNodes = (document: SpriteDocument): LayerPanelNode[] =>
+  buildLayerPanelTree({ layers: document.layers, groups: document.groups }).filter((node) => node.depth === 0)
+
+/** 根据完整的顶层可见顺序，把组锚点重新放到相邻根图层之间。 */
+const rebaseRootGroupPanelOrders = (document: SpriteDocument, topToBottom: readonly LayerPanelNode[]): void => {
+  const rootLayerOrder = new Map(document.layers.map((layer, index) => [layer.id, index]))
+  let index = 0
+  while (index < topToBottom.length) {
+    if (topToBottom[index].kind === 'layer') { index += 1; continue }
+    const start = index
+    while (index < topToBottom.length && topToBottom[index].kind === 'group') index += 1
+    const run = topToBottom.slice(start, index)
+    const above = start > 0 && topToBottom[start - 1].kind === 'layer' ? rootLayerOrder.get(topToBottom[start - 1].id) : undefined
+    const below = index < topToBottom.length && topToBottom[index].kind === 'layer' ? rootLayerOrder.get(topToBottom[index].id) : undefined
+    for (let offset = 0; offset < run.length; offset += 1) {
+      const group = document.groups.find((candidate) => candidate.id === run[offset].id)
+      if (!group) continue
+      if (above !== undefined && below !== undefined) group.panelOrder = above - ((above - below) * (offset + 1)) / (run.length + 1)
+      else if (below !== undefined) group.panelOrder = below + run.length - offset
+      else if (above !== undefined) group.panelOrder = above - offset - 1
+      else group.panelOrder = run.length - offset - 1
+    }
+  }
+}
+
+const groupPanelAnchor = (document: SpriteDocument, groupId: string, visiting = new Set<string>()): number => {
+  if (visiting.has(groupId)) return Number.NEGATIVE_INFINITY
+  const nextVisiting = new Set(visiting).add(groupId)
+  let anchor = Number.NEGATIVE_INFINITY
+  document.layers.forEach((layer, index) => { if (layer.groupId === groupId) anchor = Math.max(anchor, index) })
+  for (const child of document.groups) if ((child.parentGroupId ?? null) === groupId) anchor = Math.max(anchor, groupPanelAnchor(document, child.id, nextVisiting))
+  if (anchor !== Number.NEGATIVE_INFINITY) return anchor
+  const group = getGroup(document, groupId)
+  return typeof group.panelOrder === 'number' && Number.isFinite(group.panelOrder)
+    ? group.panelOrder
+    : document.layers.length + document.groups.indexOf(group) + 1
+}
+
+const applyGroupPlacement = (group: LayerGroup, parentGroupId: string | null, panelOrder: number | undefined): void => {
+  group.parentGroupId = parentGroupId
+  group.panelOrder = panelOrder
+}
+
 export const canMoveGroupInto = (document: SpriteDocument, groupId: string, parentGroupId: string): boolean =>
   groupId !== parentGroupId && !getDescendantGroupIds(document, groupId).includes(parentGroupId)
 
@@ -147,6 +201,7 @@ export const reorderGroup = (state: LayerOperationState, groupId: string, target
   const beforeLayerOrder = document.layers.map((layer) => layer.id)
   const beforeGroupOrder = document.groups.map((item) => item.id)
   const beforeParent = group.parentGroupId ?? null
+  const beforePanelOrder = group.panelOrder
   const activeLayerId = document.activeLayerId
   const layerById = new Map(document.layers.map((layer) => [layer.id, layer]))
   const groupById = new Map(document.groups.map((item) => [item.id, item]))
@@ -162,18 +217,45 @@ export const reorderGroup = (state: LayerOperationState, groupId: string, target
   remainingGroups.splice(targetIndex + (insertAfterTarget ? 1 : 0), 0, group)
   document.groups = remainingGroups
   group.parentGroupId = target.parentGroupId ?? null
+  group.panelOrder = groupPanelAnchor(document, targetGroupId) + (insertAfterTarget ? 0.25 : -0.25)
   const selected = getLayerIdsInGroup(document, group.id)
   state.selectedGroupId = group.id
+  state.selectedGroupIds = [group.id]
   state.selectedLayerIds = selected
   const afterLayerOrder = document.layers.map((layer) => layer.id)
   const afterGroupOrder = document.groups.map((item) => item.id)
   const afterParent = group.parentGroupId ?? null
-  const apply = (layerOrder: string[], groupOrder: string[], parentGroupId: string | null): void => {
+  const afterPanelOrder = group.panelOrder
+  const apply = (layerOrder: string[], groupOrder: string[], parentGroupId: string | null, panelOrder: number | undefined): void => {
     applyLayerOrder(document, layerById, layerOrder, activeLayerId)
     document.groups = groupOrder.map((id) => groupById.get(id)).filter((item): item is SpriteDocument['groups'][number] => Boolean(item))
-    group.parentGroupId = parentGroupId
+    applyGroupPlacement(group, parentGroupId, panelOrder)
+  }
+  return { label: '移动图层组', bytes: (beforeLayerOrder.length + afterLayerOrder.length + beforeGroupOrder.length + afterGroupOrder.length) * 8 + 56, undo: () => apply(beforeLayerOrder, beforeGroupOrder, beforeParent, beforePanelOrder), redo: () => apply(afterLayerOrder, afterGroupOrder, afterParent, afterPanelOrder) }
+}
+
+export const positionGroupNextToLayer = (state: LayerOperationState, groupId: string, targetLayerId: string, insertAfterTarget = true): HistoryEntry | null => {
+  const { document } = state
+  const group = getGroup(document, groupId)
+  const target = document.layers.find((layer) => layer.id === targetLayerId)
+  if (!target) return null
+  const parentGroupId = target.groupId ?? null
+  if (parentGroupId && !canMoveGroupInto(document, groupId, parentGroupId)) return null
+  const beforeParent = group.parentGroupId ?? null
+  const beforePanelOrder = group.panelOrder
+  const targetIndex = document.layers.findIndex((layer) => layer.id === targetLayerId)
+  const afterPanelOrder = targetIndex + (insertAfterTarget ? 0.25 : -0.25)
+  if (beforeParent === parentGroupId && beforePanelOrder === afterPanelOrder) return null
+  applyGroupPlacement(group, parentGroupId, afterPanelOrder)
+  state.selectedGroupId = group.id
+  state.selectedGroupIds = [group.id]
+  state.selectedLayerIds = getLayerIdsInGroup(document, group.id)
+  return {
+    label: '移动图层组',
+    bytes: 56,
+    undo: () => applyGroupPlacement(group, beforeParent, beforePanelOrder),
+    redo: () => applyGroupPlacement(group, parentGroupId, afterPanelOrder)
   }
-  return { label: '移动图层组', bytes: (beforeLayerOrder.length + afterLayerOrder.length + beforeGroupOrder.length + afterGroupOrder.length) * 8 + 48, undo: () => apply(beforeLayerOrder, beforeGroupOrder, beforeParent), redo: () => apply(afterLayerOrder, afterGroupOrder, afterParent) }
 }
 
 export const assignGroupToGroup = (state: LayerOperationState, groupId: string, parentGroupId: string): HistoryEntry | null => {
@@ -184,6 +266,7 @@ export const assignGroupToGroup = (state: LayerOperationState, groupId: string,
   if (before === parentGroupId) return null
   group.parentGroupId = parentGroupId
   state.selectedGroupId = group.id
+  state.selectedGroupIds = [group.id]
   state.selectedLayerIds = getLayerIdsInGroup(state.document, group.id)
   return { label: '移动图层组', bytes: 48, undo: () => { group.parentGroupId = before }, redo: () => { group.parentGroupId = parentGroupId } }
 }
@@ -194,26 +277,107 @@ export const assignGroupToRoot = (state: LayerOperationState, groupId: string):
   if (!before) return null
   group.parentGroupId = null
   state.selectedGroupId = group.id
+  state.selectedGroupIds = [group.id]
   state.selectedLayerIds = getLayerIdsInGroup(state.document, group.id)
   return { label: '移到最外层', bytes: 48, undo: () => { group.parentGroupId = before }, redo: () => { group.parentGroupId = null } }
 }
 
+export const moveLayersToRootEdge = (state: LayerOperationState, layerIds: readonly string[], edge: 'top' | 'bottom'): HistoryEntry | null => {
+  const ids = uniqueLayerIds(layerIds)
+  const { document } = state
+  const moving = document.layers.filter((layer) => ids.includes(layer.id))
+  if (moving.length === 0) return null
+  const beforeOrder = document.layers.map((layer) => layer.id)
+  const beforeGroupIds = new Map(moving.map((layer) => [layer.id, layer.groupId ?? null]))
+  const beforePanelOrders = new Map(document.groups.map((group) => [group.id, group.panelOrder]))
+  const beforeRootOrder = rootPanelNodes(document)
+  const layerById = new Map(document.layers.map((layer) => [layer.id, layer]))
+  const remaining = document.layers.filter((layer) => !ids.includes(layer.id))
+  document.layers = edge === 'top' ? [...remaining, ...moving] : [...moving, ...remaining]
+  for (const layer of moving) layer.groupId = null
+  const movedIds = new Set(moving.map((layer) => layer.id))
+  const remainingRootOrder = beforeRootOrder.filter((node) => node.kind !== 'layer' || !movedIds.has(node.id))
+  const movingRootOrder: LayerPanelNode[] = [...moving].reverse().map((layer) => ({ kind: 'layer', id: layer.id, depth: 0 }))
+  rebaseRootGroupPanelOrders(document, edge === 'top' ? [...movingRootOrder, ...remainingRootOrder] : [...remainingRootOrder, ...movingRootOrder])
+  const selected = moving.map((layer) => layer.id)
+  const activeLayerId = selected.at(-1)!
+  selectLayers(state, selected, null)
+  const afterOrder = document.layers.map((layer) => layer.id)
+  const rootIds = new Map(moving.map((layer) => [layer.id, null]))
+  const afterPanelOrders = new Map(document.groups.map((group) => [group.id, group.panelOrder]))
+  const apply = (order: string[], groupIds: Map<string, string | null>, panelOrders: ReadonlyMap<string, number | undefined>): void => {
+    applyLayerOrder(document, layerById, order, activeLayerId)
+    applyLayerGroups(moving, groupIds)
+    applyGroupPanelOrders(document.groups, panelOrders)
+  }
+  return { label: '移动图层', bytes: (beforeOrder.length + afterOrder.length) * 8 + moving.length * 16 + document.groups.length * 16, undo: () => apply(beforeOrder, beforeGroupIds, beforePanelOrders), redo: () => apply(afterOrder, rootIds, afterPanelOrders) }
+}
+
+export const moveGroupToRootEdge = (state: LayerOperationState, groupId: string, edge: 'top' | 'bottom'): HistoryEntry | null => {
+  const { document } = state
+  const group = getGroup(document, groupId)
+  const movingGroupIds = new Set([groupId, ...getDescendantGroupIds(document, groupId)])
+  const movingLayerIds = new Set(document.layers.filter((layer) => layer.groupId && movingGroupIds.has(layer.groupId)).map((layer) => layer.id))
+  const beforeLayerOrder = document.layers.map((layer) => layer.id)
+  const beforeGroupOrder = document.groups.map((item) => item.id)
+  const beforeParent = group.parentGroupId ?? null
+  const beforePanelOrder = group.panelOrder
+  const activeLayerId = document.activeLayerId
+  const layerById = new Map(document.layers.map((layer) => [layer.id, layer]))
+  const groupById = new Map(document.groups.map((item) => [item.id, item]))
+  const movingLayers = document.layers.filter((layer) => movingLayerIds.has(layer.id))
+  const remainingLayers = document.layers.filter((layer) => !movingLayerIds.has(layer.id))
+  document.layers = edge === 'top' ? [...remainingLayers, ...movingLayers] : [...movingLayers, ...remainingLayers]
+  const orderedGroups = document.groups.filter((item) => item.id !== groupId)
+  if (edge === 'top') orderedGroups.push(group)
+  else orderedGroups.unshift(group)
+  document.groups = orderedGroups
+  group.parentGroupId = null
+  group.panelOrder = edge === 'top' ? document.layers.length + document.groups.length + 1 : -document.groups.length - 1
+  state.selectedGroupId = group.id
+  state.selectedGroupIds = [group.id]
+  state.selectedLayerIds = getLayerIdsInGroup(document, group.id)
+  const afterLayerOrder = document.layers.map((layer) => layer.id)
+  const afterGroupOrder = document.groups.map((item) => item.id)
+  const afterPanelOrder = group.panelOrder
+  const apply = (layerOrder: string[], groupOrder: string[], parentGroupId: string | null, panelOrder: number | undefined): void => {
+    applyLayerOrder(document, layerById, layerOrder, activeLayerId)
+    applyGroupOrder(document, groupById, groupOrder)
+    applyGroupPlacement(group, parentGroupId, panelOrder)
+  }
+  return { label: '移动图层组', bytes: (beforeLayerOrder.length + afterLayerOrder.length + beforeGroupOrder.length + afterGroupOrder.length) * 8 + 56, undo: () => apply(beforeLayerOrder, beforeGroupOrder, beforeParent, beforePanelOrder), redo: () => apply(afterLayerOrder, afterGroupOrder, null, afterPanelOrder) }
+}
+
 export const createLayerGroup = (state: LayerOperationState, id: string, name: string): HistoryEntry | null => {
   const { document } = state
   if (document.groups.some((group) => group.id === id)) return null
   const selected = state.selectedGroupId ? [] : document.layers.filter((layer) => state.selectedLayerIds.includes(layer.id))
-  const layers = selected.length > 0 ? selected : state.selectedGroupId ? [] : [getActiveLayer(document)]
+  const layers = selected
   const commonParent = state.selectedGroupId ?? (layers.length > 0 && layers.every((layer) => (layer.groupId ?? null) === (layers[0].groupId ?? null)) ? layers[0].groupId ?? null : null)
-  const group: LayerGroup = { id, name, description: '', parentGroupId: commonParent, visible: true, locked: false, opacity: 1, blendMode: 'normal' }
+  const highestSelectedIndex = layers.reduce((highest, layer) => Math.max(highest, document.layers.indexOf(layer)), -1)
+  const group: LayerGroup = { id, name, description: '', parentGroupId: commonParent, panelOrder: document.layers.length + document.groups.length + 1, visible: true, locked: false, opacity: 1, blendMode: 'normal' }
   const beforeGroupIds = new Map(layers.map((layer) => [layer.id, layer.groupId ?? null]))
+  const beforeLayerOrder = document.layers.map((layer) => layer.id)
   document.groups.push(group)
   for (const layer of layers) layer.groupId = group.id
+  if (layers.length > 0) {
+    const selectedIds = new Set(layers.map((layer) => layer.id))
+    const remaining = document.layers.filter((layer) => !selectedIds.has(layer.id))
+    const insertionIndex = document.layers.slice(0, highestSelectedIndex).filter((layer) => !selectedIds.has(layer.id)).length
+    document.layers = [...remaining.slice(0, insertionIndex), ...layers, ...remaining.slice(insertionIndex)]
+    group.panelOrder = insertionIndex + layers.length - 1
+  }
+  const afterLayerOrder = document.layers.map((layer) => layer.id)
+  const layerById = new Map(document.layers.map((layer) => [layer.id, layer]))
   state.selectedGroupId = group.id
+  state.selectedGroupIds = [group.id]
   state.selectedLayerIds = layers.map((layer) => layer.id)
   const applyCreate = (): void => {
     if (!document.groups.includes(group)) document.groups.push(group)
     for (const layer of layers) layer.groupId = group.id
+    applyLayerOrder(document, layerById, afterLayerOrder, document.activeLayerId)
     state.selectedGroupId = group.id
+    state.selectedGroupIds = [group.id]
   }
   return {
     label: '新建图层组',
@@ -221,7 +385,9 @@ export const createLayerGroup = (state: LayerOperationState, id: string, name: s
     undo: () => {
       document.groups = document.groups.filter((item) => item.id !== group.id)
       applyLayerGroups(layers, beforeGroupIds)
+      applyLayerOrder(document, layerById, beforeLayerOrder, document.activeLayerId)
       state.selectedGroupId = commonParent
+      state.selectedGroupIds = commonParent ? [commonParent] : []
     },
     redo: applyCreate
   }
@@ -254,6 +420,7 @@ export const ungroupSelected = (state: LayerOperationState): HistoryEntry | null
   }
   applyUngroup()
   state.selectedGroupId = null
+  state.selectedGroupIds = []
   state.selectedLayerIds = document.layers.filter((layer) => {
     const originalGroupId = beforeLayerGroupIds.get(layer.id)
     return Boolean(originalGroupId && groupIds.has(originalGroupId))
diff --git a/src/renderer/src/core/layer-panel-layout.test.ts b/src/renderer/src/core/layer-panel-layout.test.ts
index ea55932..f61285a 100644
--- a/src/renderer/src/core/layer-panel-layout.test.ts
+++ b/src/renderer/src/core/layer-panel-layout.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { buildLayerPanelTree, getLayerPanelDescendantGroupIds, resolveLayerPanelDropTarget, type LayerPanelNode } from './layer-panel-layout'
+import { buildLayerPanelTree, getLayerPanelDescendantGroupIds, resolveLayerPanelDropTarget, resolveLayerPanelEdgeDropTarget, type LayerPanelNode } from './layer-panel-layout'
 
 const layers = [
   { id: 'background', groupId: null },
@@ -13,6 +13,11 @@ const groups = [
 ]
 
 describe('layer panel layout helpers', () => {
+  it('uses explicit edge targets above and below the list', () => {
+    expect(resolveLayerPanelEdgeDropTarget(96, 100, 500)).toEqual({ kind: 'edge', edge: 'top' })
+    expect(resolveLayerPanelEdgeDropTarget(504, 100, 500)).toEqual({ kind: 'edge', edge: 'bottom' })
+    expect(resolveLayerPanelEdgeDropTarget(250, 100, 500)).toBeNull()
+  })
   it('flattens nested groups in top-to-bottom display order', () => {
     expect(buildLayerPanelTree({ layers, groups })).toEqual([
       { kind: 'group', id: 'characters', depth: 0 },
@@ -31,6 +36,40 @@ describe('layer panel layout helpers', () => {
     ])
   })
 
+  it('keeps empty groups ordered at the top of their container', () => {
+    expect(buildLayerPanelTree({
+      layers: [{ id: 'background', groupId: null }],
+      groups: [{ id: 'older', parentGroupId: null }, { id: 'newer', parentGroupId: null }]
+    })).toEqual([
+      { kind: 'group', id: 'newer', depth: 0 },
+      { kind: 'group', id: 'older', depth: 0 },
+      { kind: 'layer', id: 'background', depth: 0 }
+    ])
+  })
+
+  it('places an empty group between ordinary layers using its persisted anchor', () => {
+    expect(buildLayerPanelTree({
+      layers: [{ id: 'bottom', groupId: null }, { id: 'top', groupId: null }],
+      groups: [{ id: 'empty', parentGroupId: null, panelOrder: 0.25 }]
+    })).toEqual([
+      { kind: 'layer', id: 'top', depth: 0 },
+      { kind: 'group', id: 'empty', depth: 0 },
+      { kind: 'layer', id: 'bottom', depth: 0 }
+    ])
+  })
+
+  it('uses the persisted anchor for non-empty groups after they are moved', () => {
+    expect(buildLayerPanelTree({
+      layers: [{ id: 'bottom', groupId: null }, { id: 'member', groupId: 'moved' }, { id: 'top', groupId: null }],
+      groups: [{ id: 'moved', parentGroupId: null, panelOrder: 0.25 }]
+    })).toEqual([
+      { kind: 'layer', id: 'top', depth: 0 },
+      { kind: 'group', id: 'moved', depth: 0 },
+      { kind: 'layer', id: 'member', depth: 1 },
+      { kind: 'layer', id: 'bottom', depth: 0 }
+    ])
+  })
+
   it('guards descendant checks against nested groups', () => {
     expect(getLayerPanelDescendantGroupIds(groups, 'characters')).toEqual(['face'])
   })
diff --git a/src/renderer/src/core/layer-panel-layout.ts b/src/renderer/src/core/layer-panel-layout.ts
index 6cf5b68..204b51c 100644
--- a/src/renderer/src/core/layer-panel-layout.ts
+++ b/src/renderer/src/core/layer-panel-layout.ts
@@ -6,6 +6,7 @@ export interface LayerPanelLayerRef {
 export interface LayerPanelGroupRef {
   id: string
   parentGroupId?: string | null
+  panelOrder?: number
 }
 
 export type LayerPanelNode =
@@ -16,7 +17,14 @@ export type LayerPanelDropTarget =
   | { kind: 'layer'; id: string; insertAfter: boolean; depth: number }
   | { kind: 'group'; id: string; depth: number }
   | { kind: 'above-group'; id: string; insertAfter: boolean; depth: number }
-  | { kind: 'root' }
+
+export type LayerPanelEdgeDropTarget = { kind: 'edge'; edge: 'top' | 'bottom' }
+
+export const resolveLayerPanelEdgeDropTarget = (clientY: number, top: number, bottom: number, inset = 10): LayerPanelEdgeDropTarget | null => {
+  if (clientY <= top + inset) return { kind: 'edge', edge: 'top' }
+  if (clientY >= bottom - inset) return { kind: 'edge', edge: 'bottom' }
+  return null
+}
 
 export interface LayerPanelRowHit {
   kind: 'layer' | 'group'
@@ -72,11 +80,20 @@ export const buildLayerPanelTree = ({ layers, groups, collapsedGroupIds = [] }:
   const groupAnchor = (groupId: string, visiting = new Set<string>()): number => {
     const cached = anchorCache.get(groupId)
     if (cached !== undefined) return cached
+    const savedOrder = groupById.get(groupId)?.panelOrder
+    if (typeof savedOrder === 'number' && Number.isFinite(savedOrder)) {
+      anchorCache.set(groupId, savedOrder)
+      return savedOrder
+    }
     if (visiting.has(groupId)) return Number.NEGATIVE_INFINITY
     const nextVisiting = new Set(visiting).add(groupId)
     let anchor = Number.NEGATIVE_INFINITY
     for (const layer of layers) if ((layer.groupId ?? null) === groupId) anchor = Math.max(anchor, layerOrder.get(layer.id) ?? anchor)
     for (const group of groups) if (normalizedParent(group, groupById) === groupId) anchor = Math.max(anchor, groupAnchor(group.id, nextVisiting))
+    // 旧工程的空组没有排序锚点时，仍按组数组顺序置于容器顶部。
+    if (anchor === Number.NEGATIVE_INFINITY) {
+      anchor = Number.POSITIVE_INFINITY
+    }
     anchorCache.set(groupId, anchor)
     return anchor
   }
diff --git a/src/renderer/src/core/outline-settings.ts b/src/renderer/src/core/outline-settings.ts
new file mode 100644
index 0000000..9467c6d
--- /dev/null
+++ b/src/renderer/src/core/outline-settings.ts
@@ -0,0 +1,45 @@
+import type { OutlineDirection, OutlineKernel, OutlinePosition, OutlineSettings, RgbaColor } from '@shared/types'
+
+const directions: OutlineDirection[] = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
+const positions = new Set<OutlinePosition>(['inside', 'outside', 'both'])
+const kernels = new Set<OutlineKernel>(['round', 'square', 'horizontal', 'vertical'])
+
+const clampChannel = (value: unknown, fallback: number): number =>
+  typeof value === 'number' && Number.isFinite(value) ? Math.max(0, Math.min(255, Math.round(value))) : fallback
+
+export const defaultOutlineSettings = (color: RgbaColor): OutlineSettings => ({
+  color: { ...color },
+  thickness: 1,
+  position: 'outside',
+  kernel: 'round',
+  directions: { nw: false, n: true, ne: false, w: true, e: true, sw: false, s: true, se: false },
+  previewEnabled: true
+})
+
+export const cloneOutlineSettings = (settings: OutlineSettings): OutlineSettings => ({
+  ...settings,
+  color: { ...settings.color },
+  directions: { ...settings.directions }
+})
+
+export const normalizeOutlineSettings = (value: unknown, fallbackColor?: RgbaColor): OutlineSettings | null => {
+  if (!value || typeof value !== 'object') return fallbackColor ? defaultOutlineSettings(fallbackColor) : null
+  const candidate = value as Partial<OutlineSettings>
+  const fallback = defaultOutlineSettings(fallbackColor ?? { r: 0, g: 0, b: 0, a: 255 })
+  const color = candidate.color && typeof candidate.color === 'object' ? candidate.color : fallback.color
+  return {
+    color: {
+      r: clampChannel(color.r, fallback.color.r),
+      g: clampChannel(color.g, fallback.color.g),
+      b: clampChannel(color.b, fallback.color.b),
+      a: clampChannel(color.a, fallback.color.a)
+    },
+    thickness: typeof candidate.thickness === 'number' && Number.isFinite(candidate.thickness)
+      ? Math.max(1, Math.min(64, Math.round(candidate.thickness)))
+      : fallback.thickness,
+    position: positions.has(candidate.position as OutlinePosition) ? candidate.position as OutlinePosition : fallback.position,
+    kernel: kernels.has(candidate.kernel as OutlineKernel) ? candidate.kernel as OutlineKernel : fallback.kernel,
+    directions: Object.fromEntries(directions.map((direction) => [direction, candidate.directions?.[direction] === true])) as OutlineSettings['directions'],
+    previewEnabled: candidate.previewEnabled !== false
+  }
+}
diff --git a/src/renderer/src/core/panel-render-keys.test.ts b/src/renderer/src/core/panel-render-keys.test.ts
index 46ee925..ecca0b0 100644
--- a/src/renderer/src/core/panel-render-keys.test.ts
+++ b/src/renderer/src/core/panel-render-keys.test.ts
@@ -9,6 +9,7 @@ const session = () => ({
   selectedPaletteIds: [] as number[],
   selectedLayerIds: [] as string[],
   selectedGroupId: null as string | null,
+  selectedGroupIds: [] as string[],
   collapsedGroupIds: [] as string[],
   revision: 0,
   view: { relativeLuminance: false }
diff --git a/src/renderer/src/core/panel-render-keys.ts b/src/renderer/src/core/panel-render-keys.ts
index bcd4609..3e7af06 100644
--- a/src/renderer/src/core/panel-render-keys.ts
+++ b/src/renderer/src/core/panel-render-keys.ts
@@ -7,6 +7,7 @@ interface PanelSessionState {
   selectedPaletteIds: number[]
   selectedLayerIds: string[]
   selectedGroupId: string | null
+  selectedGroupIds: string[]
   collapsedGroupIds: string[]
   revision: number
   view: { relativeLuminance: boolean }
@@ -32,6 +33,7 @@ export const layersPanelRenderKey = (session: PanelSessionState): string => [
   session.document.groups.map((group) => `${group.id}:${group.name}:${group.parentGroupId ?? ''}:${group.visible ? 1 : 0}:${group.locked ? 1 : 0}:${group.opacity}:${group.blendMode}`).join('|'),
   session.selectedLayerIds.join(','),
   session.selectedGroupId ?? '',
+  session.selectedGroupIds.join(','),
   session.collapsedGroupIds.join(',')
 ].join(';')
 
diff --git a/src/renderer/src/core/pixel-line.test.ts b/src/renderer/src/core/pixel-line.test.ts
new file mode 100644
index 0000000..67ede10
--- /dev/null
+++ b/src/renderer/src/core/pixel-line.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { balancedStairLinePoints } from './pixel-line'
+
+const runLengths = (points: Array<{ x: number; y: number }>, major: 'x' | 'y'): number[] => {
+  const minor = major === 'x' ? 'y' : 'x'
+  const runs: number[] = []
+  for (const point of points) {
+    const previous = points[runs.reduce((total, length) => total + length, 0) - 1]
+    if (!previous || point[minor] !== previous[minor]) runs.push(1)
+    else runs[runs.length - 1] += 1
+  }
+  return runs
+}
+
+describe('balanced stair line', () => {
+  it('distributes shallow-line pixels evenly across every stair', () => {
+    const points = balancedStairLinePoints({ x: 0, y: 0 }, { x: 8, y: 2 })
+    expect(points[0]).toEqual({ x: 0, y: 0 })
+    expect(points.at(-1)).toEqual({ x: 8, y: 2 })
+    expect(runLengths(points, 'x')).toEqual([3, 3, 3])
+  })
+
+  it('supports steep, reversed and negative-slope lines without changing their pixels', () => {
+    const forward = balancedStairLinePoints({ x: 1, y: 8 }, { x: 4, y: 0 })
+    const reverse = balancedStairLinePoints({ x: 4, y: 0 }, { x: 1, y: 8 })
+    const runs = runLengths(forward, 'y')
+    expect(Math.max(...runs) - Math.min(...runs)).toBeLessThanOrEqual(1)
+    expect(reverse).toEqual([...forward].reverse())
+  })
+
+  it('preserves horizontal, vertical and diagonal endpoints', () => {
+    expect(balancedStairLinePoints({ x: 2, y: 3 }, { x: 5, y: 3 })).toHaveLength(4)
+    expect(balancedStairLinePoints({ x: 2, y: 3 }, { x: 2, y: 7 })).toHaveLength(5)
+    expect(balancedStairLinePoints({ x: 1, y: 1 }, { x: 4, y: 4 })).toEqual([
+      { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }, { x: 4, y: 4 }
+    ])
+  })
+})
diff --git a/src/renderer/src/core/pixel-line.ts b/src/renderer/src/core/pixel-line.ts
new file mode 100644
index 0000000..94010d9
--- /dev/null
+++ b/src/renderer/src/core/pixel-line.ts
@@ -0,0 +1,34 @@
+export interface PixelLinePoint { x: number; y: number }
+
+/**
+ * 将主轴像素平均分配到每一级台阶，避免 Bresenham 在线段两端产生明显短阶。
+ * 计算始终从主轴较小的一端开始，因此反向绘制会得到完全相同的像素集合。
+ */
+export function balancedStairLinePoints(from: PixelLinePoint, to: PixelLinePoint): PixelLinePoint[] {
+  const deltaX = Math.abs(to.x - from.x)
+  const deltaY = Math.abs(to.y - from.y)
+  const xMajor = deltaX >= deltaY
+  const reverse = xMajor ? from.x > to.x : from.y > to.y
+  const start = reverse ? to : from
+  const end = reverse ? from : to
+  const majorLength = (xMajor ? Math.abs(end.x - start.x) : Math.abs(end.y - start.y)) + 1
+  const minorSteps = xMajor ? Math.abs(end.y - start.y) : Math.abs(end.x - start.x)
+  const stairCount = minorSteps + 1
+  const minorDirection = xMajor
+    ? end.y >= start.y ? 1 : -1
+    : end.x >= start.x ? 1 : -1
+  const points: PixelLinePoint[] = []
+  let majorOffset = 0
+
+  for (let stair = 0; stair < stairCount; stair += 1) {
+    const stairEnd = Math.floor(((stair + 1) * majorLength) / stairCount)
+    while (majorOffset < stairEnd) {
+      points.push(xMajor
+        ? { x: start.x + majorOffset, y: start.y + stair * minorDirection }
+        : { x: start.x + stair * minorDirection, y: start.y + majorOffset })
+      majorOffset += 1
+    }
+  }
+
+  return reverse ? points.reverse() : points
+}
diff --git a/src/renderer/src/core/preview-geometry.test.ts b/src/renderer/src/core/preview-geometry.test.ts
index b5d6823..a63f3aa 100644
--- a/src/renderer/src/core/preview-geometry.test.ts
+++ b/src/renderer/src/core/preview-geometry.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { anchoredPreviewPan } from './preview-geometry'
+import { anchoredPreviewPan, previewCheckerCellSize } from './preview-geometry'
 
 describe('preview zoom geometry', () => {
   it('keeps the document point under the pointer while zooming', () => {
@@ -23,4 +23,10 @@ describe('preview zoom geometry', () => {
       nextZoom: 2
     })).toEqual({ x: 0, y: 20 })
   })
+
+  it('matches the main canvas checkerboard rule at the final display scale', () => {
+    expect(previewCheckerCellSize(8, 1)).toBe(8)
+    expect(previewCheckerCellSize(8, 0.25)).toBe(2)
+    expect(previewCheckerCellSize(8, 0.01)).toBeCloseTo(0.08)
+  })
 })
diff --git a/src/renderer/src/core/preview-geometry.ts b/src/renderer/src/core/preview-geometry.ts
index 8380e5c..fbc17d1 100644
--- a/src/renderer/src/core/preview-geometry.ts
+++ b/src/renderer/src/core/preview-geometry.ts
@@ -1,6 +1,8 @@
 interface Point { x: number; y: number }
 interface Size { width: number; height: number }
 
+export const previewCheckerCellSize = (checkerSize: number, displayScale: number): number => checkerSize * displayScale
+
 interface AnchoredPreviewPanOptions {
   documentSize: Size
   viewportSize: Size
diff --git a/src/renderer/src/core/project-format.test.ts b/src/renderer/src/core/project-format.test.ts
index cc935f9..5ee7046 100644
--- a/src/renderer/src/core/project-format.test.ts
+++ b/src/renderer/src/core/project-format.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
-import { PROJECT_SCHEMA_VERSION, migrateProjectManifest } from './project-format'
+import { createDocument } from './document'
+import { decodeProject, encodeProject, PROJECT_SCHEMA_VERSION, migrateProjectManifest } from './project-format'
 
 describe('project manifest migration boundary', () => {
   it('accepts the current schema through the migration entry point', () => {
@@ -15,4 +16,18 @@ describe('project manifest migration boundary', () => {
     expect(() => migrateProjectManifest({ app: 'MoonSprite', schemaVersion: 3, document: { schemaVersion: 3 } })).toThrow()
     expect(() => migrateProjectManifest({ app: 'Other', schemaVersion: 1, document: { schemaVersion: 1 } })).toThrow()
   })
+
+  it('round-trips project-owned outline settings', () => {
+    const document = createDocument('outline settings', 2, 2, 'rgba')
+    document.outlineSettings = {
+      color: { r: 10, g: 20, b: 30, a: 255 },
+      thickness: 3,
+      position: 'inside',
+      kernel: 'square',
+      directions: { nw: true, n: false, ne: true, w: true, e: true, sw: false, s: true, se: false },
+      previewEnabled: false
+    }
+
+    expect(decodeProject(encodeProject(document)).outlineSettings).toEqual(document.outlineSettings)
+  })
 })
diff --git a/src/renderer/src/core/project-format.ts b/src/renderer/src/core/project-format.ts
index 262ff1d..dabc539 100644
--- a/src/renderer/src/core/project-format.ts
+++ b/src/renderer/src/core/project-format.ts
@@ -2,6 +2,7 @@ import { strFromU8, strToU8, unzipSync, zipSync } from 'fflate'
 import { BLEND_MODES, type BlendMode, type ColorMode, type LayerGroup, type PaletteEntry, type ProjectBrush, type RasterLayer, type RgbaColor, type SpriteDocument } from '@shared/types'
 import { compositeDocument, createId } from './document'
 import { createDefaultAnimationTimeline, normalizeAnimationTimeline } from './animation'
+import { normalizeOutlineSettings } from './outline-settings'
 import { encodePng } from './png'
 
 interface ManifestLayer {
@@ -66,6 +67,7 @@ const normalizeLayerGroups = (source: unknown): LayerGroup[] => {
     groups.push({
       id: candidate.id,
       name: typeof candidate.name === 'string' && candidate.name ? candidate.name : '未命名组',
+      ...(Number.isFinite(candidate.panelOrder) ? { panelOrder: Number(candidate.panelOrder) } : {}),
       ...(normalizeDisplayColor(candidate.displayColor) ? { displayColor: normalizeDisplayColor(candidate.displayColor)! } : {}),
       ...(typeof candidate.description === 'string' && candidate.description ? { description: candidate.description } : {}),
       ...(candidate.parentGroupId === undefined ? {} : { parentGroupId: typeof candidate.parentGroupId === 'string' ? candidate.parentGroupId : null }),
@@ -256,6 +258,7 @@ export function decodeProject(input: Uint8Array): SpriteDocument {
     }
     customBrushes.push({ id: metadata.id, name: metadata.name, width: metadata.width, height: metadata.height, coverage: bytes.slice(), colors, sourceX: metadata.sourceX, sourceY: metadata.sourceY })
   }
+  const outlineSettings = normalizeOutlineSettings(source.outlineSettings)
   return {
     schemaVersion: PROJECT_SCHEMA_VERSION,
     id: createId('doc'),
@@ -271,6 +274,7 @@ export function decodeProject(input: Uint8Array): SpriteDocument {
     nextColorId: Math.max(1, source.nextColorId ?? 1),
     customBrushes,
     animation: normalizeAnimationTimeline(source.animation),
+    ...(outlineSettings ? { outlineSettings } : {}),
     filePath: null,
     dirty: false,
     createdAt: source.createdAt || new Date().toISOString(),
diff --git a/src/renderer/src/core/selection.test.ts b/src/renderer/src/core/selection.test.ts
new file mode 100644
index 0000000..99aa62e
--- /dev/null
+++ b/src/renderer/src/core/selection.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { invertSelectionMask, rasterLinePoints, selectionContains } from './selection'
+
+describe('selection preview geometry', () => {
+  it('terminates at the requested endpoint for uneven diagonal segments', () => {
+    const points = rasterLinePoints({ x: 1, y: 1 }, { x: 9, y: 3 })
+    expect(points[0]).toEqual({ x: 1, y: 1 })
+    expect(points.at(-1)).toEqual({ x: 9, y: 3 })
+    expect(points).toHaveLength(9)
+  })
+
+  it('supports vertical and reverse segments', () => {
+    expect(rasterLinePoints({ x: 4, y: 5 }, { x: 4, y: 2 })).toEqual([
+      { x: 4, y: 5 }, { x: 4, y: 4 }, { x: 4, y: 3 }, { x: 4, y: 2 }
+    ])
+  })
+
+  it('inverts an irregular selection across the complete canvas', () => {
+    const inverted = invertSelectionMask({ x: 1, y: 0, width: 2, height: 2, mask: Uint8Array.from([1, 0, 0, 1]) }, 4, 3)
+
+    expect(inverted).not.toBeNull()
+    expect(selectionContains(inverted, 1, 0)).toBe(false)
+    expect(selectionContains(inverted, 2, 1)).toBe(false)
+    expect(selectionContains(inverted, 0, 0)).toBe(true)
+    expect(selectionContains(inverted, 3, 2)).toBe(true)
+  })
+})
diff --git a/src/renderer/src/core/selection.ts b/src/renderer/src/core/selection.ts
index be01910..0d7331b 100644
--- a/src/renderer/src/core/selection.ts
+++ b/src/renderer/src/core/selection.ts
@@ -2,6 +2,25 @@ import type { RasterLayer, SelectionMask, SelectionMode, SelectionRect, SpriteDo
 import { getPaletteEntry } from './document'
 import { isInBounds, packColor, pixelIndex } from './raster'
 
+export const rasterLinePoints = (from: { x: number; y: number }, to: { x: number; y: number }): Array<{ x: number; y: number }> => {
+  const points: Array<{ x: number; y: number }> = []
+  let x = from.x
+  let y = from.y
+  const dx = Math.abs(to.x - from.x)
+  const dy = Math.abs(to.y - from.y)
+  const stepX = from.x < to.x ? 1 : -1
+  const stepY = from.y < to.y ? 1 : -1
+  let error = dx - dy
+  while (true) {
+    points.push({ x, y })
+    if (x === to.x && y === to.y) break
+    const doubled = error * 2
+    if (doubled > -dy) { error -= dy; x += stepX }
+    if (doubled < dx) { error += dx; y += stepY }
+  }
+  return points
+}
+
 export const selectionContains = (selection: SelectionMask | null | undefined, x: number, y: number): boolean => {
   if (!selection || x < selection.x || y < selection.y || x >= selection.x + selection.width || y >= selection.y + selection.height) return false
   return !selection.mask || selection.mask[(y - selection.y) * selection.width + x - selection.x] === 1
@@ -16,6 +35,18 @@ export const selectionPixelCount = (selection: SelectionMask | null): number =>
 export const cloneSelection = (selection: SelectionMask | null | undefined): SelectionMask | null =>
   selection ? { ...selection, mask: selection.mask?.slice() } : null
 
+export const invertSelectionMask = (selection: SelectionMask | null, canvasWidth: number, canvasHeight: number): SelectionMask | null => {
+  if (!selection || canvasWidth < 1 || canvasHeight < 1) return null
+  const mask = new Uint8Array(canvasWidth * canvasHeight)
+  let selected = 0
+  for (let y = 0; y < canvasHeight; y += 1) for (let x = 0; x < canvasWidth; x += 1) {
+    if (selectionContains(selection, x, y)) continue
+    mask[y * canvasWidth + x] = 1
+    selected += 1
+  }
+  return selected > 0 ? { x: 0, y: 0, width: canvasWidth, height: canvasHeight, mask } : null
+}
+
 export type SelectionFlipAxis = 'horizontal' | 'vertical'
 
 export const flipSelectionMask = (selection: SelectionMask, axis: SelectionFlipAxis): SelectionMask => {
diff --git a/src/renderer/src/core/shortcuts.test.ts b/src/renderer/src/core/shortcuts.test.ts
index 531a9f5..bd1d200 100644
--- a/src/renderer/src/core/shortcuts.test.ts
+++ b/src/renderer/src/core/shortcuts.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { DEFAULT_SHORTCUTS, SHORTCUT_GROUPS, SHORTCUT_LABELS, deriveShortcutConflicts, normalizeShortcut, parseShortcutJson, shortcutText } from './shortcuts'
+import { DEFAULT_SHORTCUTS, POLYGON_LASSO_SHORTCUT_MIGRATION_KEY, SHORTCUTS_KEY, SHORTCUT_GROUPS, SHORTCUT_LABELS, deriveShortcutConflicts, loadShortcuts, normalizeShortcut, parseShortcutJson, saveShortcuts, shortcutText } from './shortcuts'
 
 describe('shortcut persistence boundary', () => {
   it('only accepts known shortcut ids and string values', () => {
@@ -10,6 +10,24 @@ describe('shortcut persistence boundary', () => {
     expect({ ...DEFAULT_SHORTCUTS, ...parseShortcutJson('{bad') }).toMatchObject({ save: 'Ctrl+S', fillForeground: 'F' })
   })
 
+  it('migrates the old empty polygon-lasso default once without overriding later user changes', () => {
+    const values = new Map<string, string>()
+    const storage = {
+      getItem: (key: string) => values.get(key) ?? null,
+      setItem: (key: string, value: string) => { values.set(key, value) },
+      removeItem: (key: string) => { values.delete(key) },
+      clear: () => values.clear(),
+      key: (index: number) => [...values.keys()][index] ?? null,
+      get length() { return values.size }
+    } as Storage
+    values.set(SHORTCUTS_KEY, JSON.stringify({ polygonLasso: '' }))
+
+    expect(loadShortcuts(storage).polygonLasso).toBe('Shift+Q')
+    expect(values.get(POLYGON_LASSO_SHORTCUT_MIGRATION_KEY)).toBe('done')
+    saveShortcuts({ ...DEFAULT_SHORTCUTS, polygonLasso: '' }, storage)
+    expect(loadShortcuts(storage).polygonLasso).toBe('')
+  })
+
   it('registers every configurable command in one labeled group', () => {
     const grouped = new Set(Object.values(SHORTCUT_GROUPS).flat())
     expect(grouped).toEqual(new Set(Object.keys(DEFAULT_SHORTCUTS)))
@@ -21,6 +39,7 @@ describe('shortcut persistence boundary', () => {
     expect(DEFAULT_SHORTCUTS.adjustmentHueSaturation).toBe('Ctrl+U')
     expect(DEFAULT_SHORTCUTS.adjustmentColorBalance).toBe('')
     expect(DEFAULT_SHORTCUTS.newLayer).toBe('Shift+N')
+    expect(DEFAULT_SHORTCUTS.polygonLasso).toBe('Shift+Q')
     expect(DEFAULT_SHORTCUTS.toolRailLeft).toBe('')
     expect(DEFAULT_SHORTCUTS.swapForegroundBackground).toBe('X')
     expect(DEFAULT_SHORTCUTS.rotateViewClockwise90).toBe('')
@@ -33,6 +52,8 @@ describe('shortcut persistence boundary', () => {
     expect(shortcutText({ key: 'Control', code: 'ControlLeft', ctrlKey: true, metaKey: false, altKey: false, shiftKey: false } as KeyboardEvent)).toBe('Ctrl')
     expect(shortcutText({ key: 'Alt', code: 'AltLeft', ctrlKey: false, metaKey: false, altKey: true, shiftKey: false } as KeyboardEvent)).toBe('Alt')
     expect(shortcutText({ key: 'Shift', code: 'ShiftLeft', ctrlKey: false, metaKey: false, altKey: false, shiftKey: true } as KeyboardEvent)).toBe('Shift')
+    expect(shortcutText({ key: 'Shift', code: 'ShiftLeft', ctrlKey: true, metaKey: false, altKey: false, shiftKey: true } as KeyboardEvent)).toBe('Ctrl+Shift')
+    expect(shortcutText({ key: 'm', code: 'KeyM', ctrlKey: true, metaKey: false, altKey: true, shiftKey: true } as KeyboardEvent)).toBe('Ctrl+Alt+Shift+M')
   })
 
   it('rebuilds blocked shortcut conflicts from persisted settings', () => {
diff --git a/src/renderer/src/core/shortcuts.ts b/src/renderer/src/core/shortcuts.ts
index 867adec..f2360ef 100644
--- a/src/renderer/src/core/shortcuts.ts
+++ b/src/renderer/src/core/shortcuts.ts
@@ -1,6 +1,7 @@
-import { readStoredString, writeStoredJson } from './storage'
+import { readStoredString, writeStoredJson, writeStoredString } from './storage'
 
 export const SHORTCUTS_KEY = 'moonsprite.shortcuts.v1'
+export const POLYGON_LASSO_SHORTCUT_MIGRATION_KEY = 'moonsprite.shortcuts.migration.polygon-lasso-shift-q'
 
 export const DEFAULT_SHORTCUTS = {
   newDocument: 'Ctrl+N',
@@ -20,6 +21,7 @@ export const DEFAULT_SHORTCUTS = {
   'tool.zoom': 'Z',
   'tool.rotate': 'R',
   lasso: 'Q',
+  polygonLasso: 'Shift+Q',
   magic: 'W',
   canvasResize: 'C',
   imageResize: 'Ctrl+Alt+I',
@@ -34,10 +36,13 @@ export const DEFAULT_SHORTCUTS = {
   flipVertical: 'Shift+V',
   flipHorizontal: 'Shift+H',
   selectAll: 'Ctrl+A',
+  invertSelection: 'Ctrl+Shift+I',
   deselect: 'Ctrl+D',
   copy: 'Ctrl+C',
   cut: 'Ctrl+X',
   paste: 'Ctrl+V',
+  pasteAsNewLayer: 'Ctrl+Shift+V',
+  pasteAsNewDocument: '',
   save: 'Ctrl+S',
   saveAs: 'Ctrl+Shift+S',
   undo: 'Ctrl+Z',
@@ -60,6 +65,7 @@ export const DEFAULT_SHORTCUTS = {
   mirrorView: 'Ctrl+Shift+M',
   mirrorViewVertical: 'Ctrl+Shift+Alt+M',
   toggleGrid: '',
+  toggleSelectionOutline: 'Ctrl+H',
   rotateViewClockwise90: '',
   rotateViewCounterClockwise90: '',
   resetView: '',
@@ -102,14 +108,14 @@ export function normalizeShortcut(value: string): string {
 export const SHORTCUT_GROUPS = {
   file: ['newDocument', 'openDocument', 'closeDocument', 'save', 'saveAs', 'exportDocument', 'openProjectFolder'],
   tools: ['tool.pencil', 'tool.eraser', 'tool.selection', 'tool.selection.ellipse', 'tool.move', 'tool.shape', 'tool.fill', 'tool.eyedropper', 'tool.hand', 'tool.zoom', 'tool.rotate', 'brushSizeDecrease', 'brushSizeIncrease'],
-  selection: ['lasso', 'magic', 'selectAll', 'deselect', 'transform', 'outline', 'flipVertical', 'flipHorizontal', 'createBrushFromSelection'],
+  selection: ['lasso', 'polygonLasso', 'magic', 'selectAll', 'invertSelection', 'deselect', 'transform', 'outline', 'flipVertical', 'flipHorizontal', 'createBrushFromSelection'],
   image: ['canvasResize', 'imageResize', 'fillForeground', 'convertColorMode'],
   colors: ['swapForegroundBackground'],
   adjustments: ['adjustmentColorBalance', 'adjustmentBrightnessContrast', 'adjustmentHueSaturation', 'adjustmentCurves'],
-  layers: ['newLayer', 'createLayerGroup', 'duplicateLayer', 'mergeLayerDown', 'mergeSelectedLayers', 'mergeLayerGroup', 'mergeVisibleLayers', 'ungroupLayers', 'deleteLayer'],
+  layers: ['newLayer', 'createLayerGroup', 'duplicateLayer', 'mergeLayerDown', 'mergeSelectedLayers', 'mergeLayerGroup', 'mergeVisibleLayers', 'ungroupLayers', 'deleteLayer', 'toggleSelectionOutline'],
   view: ['relativeLuminance', 'advancedMode', 'mirrorView', 'mirrorViewVertical', 'toggleGrid', 'rotateViewClockwise90', 'rotateViewCounterClockwise90', 'resetView', 'toggleColorPanel', 'togglePalettePanel', 'toggleLayersPanel', 'togglePreviewPanel', 'toolRailLeft', 'toolRailRight'],
   modifiers: ['temporaryEyedropper', 'copySelectionContent', 'copyLayerOnDrag', 'constrainAxis', 'addToSelection', 'proportionalSelectionTransform', 'integerSelectionScale', 'snapSelectionRotation', 'snapViewRotation', 'resetViewRotation', 'temporaryPan', 'brushSizeAdjust', 'brushSizeWheelAdjust', 'lineConnectionMode'],
-  commands: ['copy', 'cut', 'paste', 'undo', 'redo', 'openShortcutSettings', 'openPreferences'],
+  commands: ['copy', 'cut', 'paste', 'pasteAsNewLayer', 'pasteAsNewDocument', 'undo', 'redo', 'openShortcutSettings', 'openPreferences'],
   help: ['openComponentLibrary', 'openAbout']
 } as const
 
@@ -130,8 +136,8 @@ export const SHORTCUT_GROUP_LABELS: Record<keyof typeof SHORTCUT_GROUPS, string>
 export const SHORTCUT_LABELS: Record<ShortcutId, string> = {
   newDocument: '新建工程', openDocument: '打开工程', closeDocument: '关闭工程', openProjectFolder: '在文件夹中打开', exportDocument: '导出',
   'tool.pencil': '画笔', 'tool.eraser': '橡皮擦', 'tool.selection': '矩形选区', 'tool.selection.ellipse': '椭圆选区', 'tool.move': '移动工具', 'tool.shape': '形状工具', 'tool.fill': '油漆桶', 'tool.eyedropper': '吸管', 'tool.hand': '抓手', 'tool.zoom': '缩放工具', 'tool.rotate': '旋转视图',
-  lasso: '套索选区', magic: '魔棒选区', canvasResize: '调整画布大小', imageResize: '调整图像大小', transform: '变换', outline: '描边', adjustmentColorBalance: '色彩平衡', adjustmentBrightnessContrast: '亮度/对比度', adjustmentHueSaturation: '色相/饱和度', adjustmentCurves: '曲线', openShortcutSettings: '快捷键设置', openPreferences: '首选项', flipVertical: '垂直翻转', flipHorizontal: '水平翻转', selectAll: '全选', deselect: '取消选择', createBrushFromSelection: '从选区创建笔刷',
-  copy: '复制', cut: '剪切', paste: '粘贴', save: '保存', saveAs: '另存为', undo: '撤销', redo: '重做', relativeLuminance: '查看相对明暗', advancedMode: '高级模式', fillForeground: '填充前景色', swapForegroundBackground: '交换前景色与背景色', convertColorMode: '转换颜色模式', newLayer: '新建图层', createLayerGroup: '新建图层组', duplicateLayer: '复制图层', mergeLayerDown: '向下合并', mergeSelectedLayers: '合并所选图层', mergeLayerGroup: '合并图层组', mergeVisibleLayers: '合并可见图层', ungroupLayers: '解组', deleteLayer: '删除图层或选区', mirrorView: '水平镜像视图', mirrorViewVertical: '垂直镜像视图', toggleGrid: '显示像素网格', rotateViewClockwise90: '顺时针旋转视图 90°', rotateViewCounterClockwise90: '逆时针旋转视图 90°', resetView: '复位视图', toggleColorPanel: '显示或隐藏颜色栏目', togglePalettePanel: '显示或隐藏调色板栏目', toggleLayersPanel: '显示或隐藏图层栏目', togglePreviewPanel: '显示或隐藏预览栏目', toolRailLeft: '工具栏放到左侧', toolRailRight: '工具栏放到右侧', openComponentLibrary: '组件库', openAbout: '关于 MoonSprite',
+  lasso: '套索选区', polygonLasso: '多边形套索', magic: '魔棒选区', canvasResize: '调整画布大小', imageResize: '调整图像大小', transform: '变换', outline: '描边', adjustmentColorBalance: '色彩平衡', adjustmentBrightnessContrast: '亮度/对比度', adjustmentHueSaturation: '色相/饱和度', adjustmentCurves: '曲线', openShortcutSettings: '快捷键设置', openPreferences: '首选项', flipVertical: '垂直翻转', flipHorizontal: '水平翻转', selectAll: '全选', invertSelection: '反选选区', deselect: '取消选择', createBrushFromSelection: '从选区创建笔刷',
+  copy: '复制', cut: '剪切', paste: '粘贴', pasteAsNewLayer: '粘贴为新图层', pasteAsNewDocument: '粘贴为新项目', save: '保存', saveAs: '另存为', undo: '撤销', redo: '重做', relativeLuminance: '查看相对明暗', advancedMode: '高级模式', fillForeground: '填充前景色', swapForegroundBackground: '交换前景色与背景色', convertColorMode: '转换颜色模式', newLayer: '新建图层', createLayerGroup: '新建图层组', duplicateLayer: '复制图层', mergeLayerDown: '向下合并', mergeSelectedLayers: '合并所选图层', mergeLayerGroup: '合并图层组', mergeVisibleLayers: '合并可见图层', ungroupLayers: '解组', deleteLayer: '删除图层或选区', toggleSelectionOutline: '显示或隐藏蚂蚁线', mirrorView: '水平镜像视图', mirrorViewVertical: '垂直镜像视图', toggleGrid: '显示像素网格', rotateViewClockwise90: '顺时针旋转视图 90°', rotateViewCounterClockwise90: '逆时针旋转视图 90°', resetView: '复位视图', toggleColorPanel: '显示或隐藏颜色栏目', togglePalettePanel: '显示或隐藏调色板栏目', toggleLayersPanel: '显示或隐藏图层栏目', togglePreviewPanel: '显示或隐藏预览栏目', toolRailLeft: '工具栏放到左侧', toolRailRight: '工具栏放到右侧', openComponentLibrary: '组件库', openAbout: '关于 MoonSprite',
   brushSizeDecrease: '减小笔刷尺寸', brushSizeIncrease: '增大笔刷尺寸', temporaryEyedropper: '临时吸色', copySelectionContent: '复制选区内容', copyLayerOnDrag: '拖动复制图层', constrainAxis: '水平或垂直约束', addToSelection: '加选', proportionalSelectionTransform: '选区固定比例缩放', integerSelectionScale: '选区整数倍缩放', snapSelectionRotation: '选区八方向旋转', snapViewRotation: '视图八方向旋转', resetViewRotation: '旋转视图临时复位', temporaryPan: '临时抓手', brushSizeAdjust: '拖动调整笔刷尺寸', brushSizeWheelAdjust: '滚轮调整笔刷尺寸', lineConnectionMode: '直线连接模式'
 }
 
@@ -171,6 +177,10 @@ export function loadShortcuts(storage?: Storage): ShortcutMap {
   const saved = parseShortcutJson(readStoredString(SHORTCUTS_KEY, storage))
   // 旧版垂直镜像默认键与 Ctrl+Alt 调整笔刷尺寸重叠，只迁移未被用户改过的旧默认值。
   if (saved.mirrorViewVertical === 'Ctrl+Alt+M' && (saved.brushSizeAdjust === undefined || saved.brushSizeAdjust === DEFAULT_SHORTCUTS.brushSizeAdjust)) saved.mirrorViewVertical = DEFAULT_SHORTCUTS.mirrorViewVertical
+  if (readStoredString(POLYGON_LASSO_SHORTCUT_MIGRATION_KEY, storage) !== 'done') {
+    if (saved.polygonLasso === '') saved.polygonLasso = DEFAULT_SHORTCUTS.polygonLasso
+    writeStoredString(POLYGON_LASSO_SHORTCUT_MIGRATION_KEY, 'done', storage)
+  }
   return { ...DEFAULT_SHORTCUTS, ...saved }
 }
 
@@ -186,10 +196,10 @@ export function keyboardEventKey(event: KeyboardEvent): string {
 
 export function shortcutText(event: KeyboardEvent): string {
   const key = keyboardEventKey(event)
-  if (key === 'Control' || key === 'Meta') return 'Ctrl'
-  if (key === 'Alt') return 'Alt'
-  if (key === 'Shift') return 'Shift'
-  return `${event.ctrlKey || event.metaKey ? 'Ctrl+' : ''}${event.altKey ? 'Alt+' : ''}${event.shiftKey ? 'Shift+' : ''}${key.length === 1 ? key.toUpperCase() : key}`
+  const modifiers = [event.ctrlKey || event.metaKey ? 'Ctrl' : '', event.altKey ? 'Alt' : '', event.shiftKey ? 'Shift' : ''].filter(Boolean)
+  const isModifier = key === 'Control' || key === 'Meta' || key === 'Alt' || key === 'Shift'
+  const ordinaryKey = isModifier ? '' : key.length === 1 ? key.toUpperCase() : key
+  return [...modifiers, ...(ordinaryKey ? [ordinaryKey] : [])].join('+')
 }
 
 export interface ShortcutConflict {
diff --git a/src/renderer/src/core/tool-preferences.ts b/src/renderer/src/core/tool-preferences.ts
index 2127ce3..dc92a08 100644
--- a/src/renderer/src/core/tool-preferences.ts
+++ b/src/renderer/src/core/tool-preferences.ts
@@ -1,4 +1,4 @@
-import type { BrushPaintMode, BrushShape, BrushTexture, FillMode, ImageBrushSettings, ProceduralBrushId, ProceduralBrushSettings, SelectionKind, SelectionMode, ShapeKind, ToolId } from '@shared/types'
+import type { BrushPaintMode, BrushShape, BrushTexture, FillMode, ImageBrushSettings, ProceduralBrushId, ProceduralBrushSettings, SelectionKind, SelectionMode, ShapeKind, ShapeRatio, ToolId } from '@shared/types'
 import { normalizeProceduralBrushSettings, PROCEDURAL_BRUSH_IDS } from './brushes'
 import { readStoredJson, writeStoredJson } from './storage'
 
@@ -23,6 +23,7 @@ export interface PersistedToolSettings extends PersistedBrushProfile {
   proceduralAntialiasPreferenceVersion: number
   brushProfiles?: Partial<Record<BrushTool, PersistedBrushProfile>>
   shapeKind: ShapeKind
+  shapeRatio: ShapeRatio | number | null
   fillMode: FillMode
   moveAutoSelect: boolean
   selectionKind: SelectionKind
@@ -51,6 +52,7 @@ export const defaultToolSettings: PersistedToolSettings = {
   proceduralAntialiasStrength: 20,
   brushProfiles: undefined,
   shapeKind: 'rectangle',
+  shapeRatio: null,
   fillMode: 'contiguous',
   moveAutoSelect: true,
   selectionKind: 'rectangle',
@@ -64,6 +66,15 @@ export const cloneProceduralSettings = (settings: Record<ProceduralBrushId, Proc
   PROCEDURAL_BRUSH_IDS.map((id) => [id, { ...settings[id] }])
 ) as Record<ProceduralBrushId, ProceduralBrushSettings>
 
+const normalizeShapeRatio = (value: ShapeRatio | number | null | undefined): ShapeRatio | null => {
+  if (typeof value === 'number' && Number.isFinite(value)) return { width: Math.max(0.1, Math.min(100, value)), height: 1 }
+  if (!value || typeof value !== 'object' || !Number.isFinite(value.width) || !Number.isFinite(value.height)) return null
+  return {
+    width: Math.max(0.1, Math.min(100, value.width)),
+    height: Math.max(0.1, Math.min(100, value.height))
+  }
+}
+
 export function normalizePersistedBrushProfile(stored: Partial<PersistedBrushProfile> | undefined, fallback: PersistedBrushProfile): PersistedBrushProfile {
   const proceduralBrushSettings = Object.fromEntries(PROCEDURAL_BRUSH_IDS.map((id) => [
     id,
@@ -106,10 +117,11 @@ export function loadToolSettings(storage?: Storage): PersistedToolSettings {
       brushPaintModePreferenceVersion: 1,
       proceduralAntialiasPreferenceVersion: 1,
       brushProfiles,
-      shapeKind: stored.shapeKind === 'ellipse' || stored.shapeKind === 'rectangle' ? stored.shapeKind : defaultToolSettings.shapeKind,
+      shapeKind: stored.shapeKind === 'ellipse' || stored.shapeKind === 'rectangle' || stored.shapeKind === 'ellipse-outline' || stored.shapeKind === 'rectangle-outline' ? stored.shapeKind : defaultToolSettings.shapeKind,
+      shapeRatio: normalizeShapeRatio(stored.shapeRatio),
       fillMode: stored.fillMode === 'global' || stored.fillMode === 'contiguous' ? stored.fillMode : defaultToolSettings.fillMode,
       moveAutoSelect: typeof stored.moveAutoSelect === 'boolean' ? stored.moveAutoSelect : defaultToolSettings.moveAutoSelect,
-      selectionKind: stored.selectionKind === 'magic' || stored.selectionKind === 'lasso' || stored.selectionKind === 'ellipse' || stored.selectionKind === 'rectangle' ? stored.selectionKind : defaultToolSettings.selectionKind,
+      selectionKind: stored.selectionKind === 'magic' || stored.selectionKind === 'lasso' || stored.selectionKind === 'polygon-lasso' || stored.selectionKind === 'ellipse' || stored.selectionKind === 'rectangle' ? stored.selectionKind : defaultToolSettings.selectionKind,
       selectionMode: stored.selectionMode === 'add' || stored.selectionMode === 'subtract' || stored.selectionMode === 'intersect' || stored.selectionMode === 'replace' ? stored.selectionMode : defaultToolSettings.selectionMode,
       wandTolerance: Number.isFinite(stored.wandTolerance) ? Math.max(0, Math.min(255, Math.round(stored.wandTolerance!))) : defaultToolSettings.wandTolerance,
       wandContiguous: typeof stored.wandContiguous === 'boolean' ? stored.wandContiguous : defaultToolSettings.wandContiguous,
diff --git a/src/renderer/src/core/tools.test.ts b/src/renderer/src/core/tools.test.ts
index a0932e4..9e5ee64 100644
--- a/src/renderer/src/core/tools.test.ts
+++ b/src/renderer/src/core/tools.test.ts
@@ -160,6 +160,21 @@ describe('pixel tools', () => {
     expect(readLayerColor(document, layer, 7 * 8 + 7)).toEqual(blue)
   })
 
+  it('paints a balanced Shift line from the same stair points used by its preview', () => {
+    const document = createDocument('balanced line', 9, 3, 'rgba')
+    const layer = getActiveLayer(document)
+    const edit = beginPixelEdit(layer.id)
+
+    paintLine(document, layer, edit, 0, 0, 8, 2, 1, blue, null, 'square', 'solid', 1, null, undefined, 0, 'paint', undefined, 'balanced')
+
+    const rows = Array.from({ length: 3 }, (_, y) => Array.from({ length: 9 }, (_, x) => readLayerColorAt(document, layer, x, y).a > 0 ? 1 : 0))
+    expect(rows).toEqual([
+      [1, 1, 1, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 1, 1, 1, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 1, 1, 1]
+    ])
+  })
+
   it('fills only the contiguous matching area', () => {
     const document = createDocument('fill', 4, 4, 'rgba')
     const layer = getActiveLayer(document)
@@ -485,6 +500,20 @@ describe('pixel tools', () => {
     expect(shapeEdit.before.size).toBe(3)
   })
 
+  it('draws hollow rectangles and ellipses without filling their centers', () => {
+    const document = createDocument('outline shapes', 7, 7, 'rgba')
+    const layer = getActiveLayer(document)
+    const rectangleEdit = beginPixelEdit(layer.id)
+    paintShape(document, layer, rectangleEdit, { x: 0, y: 0, width: 5, height: 5 }, 'rectangle-outline', blue)
+    expect(readLayerColorAt(document, layer, 0, 0).a).toBe(255)
+    expect(readLayerColorAt(document, layer, 2, 2).a).toBe(0)
+
+    const ellipseEdit = beginPixelEdit(layer.id)
+    paintShape(document, layer, ellipseEdit, { x: 1, y: 1, width: 5, height: 5 }, 'ellipse-outline', blue)
+    expect(readLayerColorAt(document, layer, 3, 1).a).toBe(255)
+    expect(readLayerColorAt(document, layer, 3, 3).a).toBe(0)
+  })
+
   it('clips an off-center brush stamp to an irregular selection', () => {
     const document = createDocument('brush selection overlap', 7, 5, 'rgba')
     const layer = getActiveLayer(document)
@@ -774,6 +803,19 @@ describe('pixel tools', () => {
     expect(readLayerColor(document, layer, 2)).toEqual(blue)
   })
 
+  it('keeps non-contiguous fill inside a non-rectangular selection mask', () => {
+    const document = createDocument('masked global fill', 3, 1, 'rgba')
+    const layer = getActiveLayer(document)
+    const selection = { x: 0, y: 0, width: 3, height: 1, mask: new Uint8Array([1, 0, 1]) }
+
+    const edit = floodFill(document, layer, 0, 0, blue, selection, false)
+
+    expect(edit?.before.size).toBe(2)
+    expect(readLayerColor(document, layer, 0)).toEqual(blue)
+    expect(readLayerColor(document, layer, 1).a).toBe(0)
+    expect(readLayerColor(document, layer, 2)).toEqual(blue)
+  })
+
   it('combines arbitrary selection masks with add, subtract, and intersect', () => {
     const left = { x: 0, y: 0, width: 2, height: 1, mask: new Uint8Array([1, 1]) }
     const right = { x: 1, y: 0, width: 2, height: 1, mask: new Uint8Array([1, 1]) }
diff --git a/src/renderer/src/core/tools.ts b/src/renderer/src/core/tools.ts
index 81cbfb4..909e812 100644
--- a/src/renderer/src/core/tools.ts
+++ b/src/renderer/src/core/tools.ts
@@ -4,6 +4,7 @@ import { beginPixelEdit, recordPixel, type PixelEdit } from './history'
 import { blendOver, isInBounds, packColor, pixelIndex, unpackColor } from './raster'
 import { rotatedSelectionBounds, selectionContains, transformedSelectionSourcePoint } from './selection'
 import { proceduralBrushCoverageAt } from './brushes'
+import { balancedStairLinePoints } from './pixel-line'
 
 const paintLayerValue = (document: SpriteDocument, layer: RasterLayer, edit: PixelEdit, index: number, color: RgbaColor): number => {
   if (color.a === 0) return layer.format === 'rgba' ? packColor(color) : 0
@@ -305,8 +306,20 @@ export function paintLine(
   imageBrushSettings?: ImageBrushSettings,
   proceduralAntialiasStrength = 0,
   brushPaintMode: BrushPaintMode = 'paint',
-  patternOrigin?: { x: number; y: number }
+  patternOrigin?: { x: number; y: number },
+  lineAlgorithm: 'raster' | 'balanced' = 'raster'
 ): void {
+  if (lineAlgorithm === 'balanced') {
+    const points = balancedStairLinePoints({ x: fromX, y: fromY }, { x: toX, y: toY })
+    const stamp = brushStampDimensions(size, imageBrush)
+    const stampSpacing = Math.max(1, Math.floor(Math.max(stamp.width, stamp.height) / 16))
+    for (let index = 0; index < points.length; index += 1) {
+      if (index % stampSpacing !== 0 && index !== points.length - 1) continue
+      const point = points[index]
+      paintBrush(document, layer, edit, point.x, point.y, size, color, shape, selection, texture, textureScale, imageBrush, imageBrushSettings, proceduralAntialiasStrength, brushPaintMode, patternOrigin)
+    }
+    return
+  }
   let x = fromX
   let y = fromY
   const dx = Math.abs(toX - fromX)
@@ -374,27 +387,13 @@ export function paintShape(
   selection?: SelectionMask | null
 ): void {
   if (!ensureLayerCoversCanvas(document, layer)) return
-  const width = Math.max(1, bounds.width)
-  const height = Math.max(1, bounds.height)
-  const centerX = (width - 1) / 2
-  const centerY = (height - 1) / 2
-  const radiusX = Math.max(0.5, width / 2)
-  const radiusY = Math.max(0.5, height / 2)
-  for (let offsetY = 0; offsetY < height; offsetY += 1) {
-    for (let offsetX = 0; offsetX < width; offsetX += 1) {
-      if (kind === 'ellipse') {
-        const dx = (offsetX - centerX) / radiusX
-        const dy = (offsetY - centerY) / radiusY
-        if ((dx * dx) + (dy * dy) > 1) continue
-      }
-      const x = bounds.x + offsetX
-      const y = bounds.y + offsetY
-      if (!isInBounds(document.width, document.height, x, y)) continue
-      if (selection && !insideSelection(selection, x, y)) continue
-      const index = layerIndexAt(layer, x, y)
-      if (index === null) continue
-      recordPixel(document, layer, edit, index, paintLayerValue(document, layer, edit, index, color))
-    }
+  for (const point of shapePixelPoints(bounds, kind)) {
+    const { x, y } = point
+    if (!isInBounds(document.width, document.height, x, y)) continue
+    if (selection && !insideSelection(selection, x, y)) continue
+    const index = layerIndexAt(layer, x, y)
+    if (index === null) continue
+    recordPixel(document, layer, edit, index, paintLayerValue(document, layer, edit, index, color))
   }
 }
 
@@ -519,14 +518,22 @@ export function shapePixelPoints(bounds: SelectionRect, kind: ShapeKind): BrushM
   const centerY = (height - 1) / 2
   const radiusX = Math.max(0.5, width / 2)
   const radiusY = Math.max(0.5, height / 2)
+  const ellipse = kind === 'ellipse' || kind === 'ellipse-outline'
+  const outline = kind === 'rectangle-outline' || kind === 'ellipse-outline'
+  const filled = new Uint8Array(width * height)
+  const contains = (offsetX: number, offsetY: number): boolean => {
+    if (offsetX < 0 || offsetY < 0 || offsetX >= width || offsetY >= height) return false
+    if (!ellipse) return true
+    const dx = (offsetX - centerX) / radiusX
+    const dy = (offsetY - centerY) / radiusY
+    return (dx * dx) + (dy * dy) <= 1
+  }
+  for (let offsetY = 0; offsetY < height; offsetY += 1) for (let offsetX = 0; offsetX < width; offsetX += 1) if (contains(offsetX, offsetY)) filled[offsetY * width + offsetX] = 1
   const points: BrushMaskPoint[] = []
   for (let offsetY = 0; offsetY < height; offsetY += 1) {
     for (let offsetX = 0; offsetX < width; offsetX += 1) {
-      if (kind === 'ellipse') {
-        const dx = (offsetX - centerX) / radiusX
-        const dy = (offsetY - centerY) / radiusY
-        if ((dx * dx) + (dy * dy) > 1) continue
-      }
+      if (!filled[offsetY * width + offsetX]) continue
+      if (outline && contains(offsetX - 1, offsetY) && contains(offsetX + 1, offsetY) && contains(offsetX, offsetY - 1) && contains(offsetX, offsetY + 1)) continue
       points.push({ x: bounds.x + offsetX, y: bounds.y + offsetY, coverage: 255 })
     }
   }
@@ -569,6 +576,7 @@ export function floodFill(document: SpriteDocument, layer: RasterLayer, startX:
     if (!bounds) return null
     for (let y = bounds.y; y < bounds.y + bounds.height; y += 1) {
       for (let x = bounds.x; x < bounds.x + bounds.width; x += 1) {
+        if (selection && !selectionContains(selection, x, y)) continue
         const index = pixelIndex(document.width, x, y)
         const layerIndex = layerIndexAt(layer, x, y)
         if (layerIndex === null || readLayerPacked(document, layer, layerIndex) !== target) continue
diff --git a/src/renderer/src/platform/cursor-theme.test.ts b/src/renderer/src/platform/cursor-theme.test.ts
new file mode 100644
index 0000000..1402bb3
--- /dev/null
+++ b/src/renderer/src/platform/cursor-theme.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { cursorPreferenceSource } from './cursor-theme'
+
+describe('cursor preference source', () => {
+  it('uses system cursors for supported scenes and MoonSprite cursors for missing scenes', () => {
+    expect(cursorPreferenceSource('--cursor-default', true)).toBe('system')
+    expect(cursorPreferenceSource('--cursor-pointer', true)).toBe('system')
+    expect(cursorPreferenceSource('--cursor-selection-rotate-ne', true)).toBe('moonsprite')
+    expect(cursorPreferenceSource('--cursor-rotate', true)).toBe('moonsprite')
+  })
+
+  it('uses MoonSprite cursors everywhere when local system cursors are disabled', () => {
+    expect(cursorPreferenceSource('--cursor-default', false)).toBe('moonsprite')
+    expect(cursorPreferenceSource('--cursor-selection-rotate-ne', false)).toBe('moonsprite')
+  })
+})
diff --git a/src/renderer/src/platform/cursor-theme.ts b/src/renderer/src/platform/cursor-theme.ts
index 640bed8..ccb337f 100644
--- a/src/renderer/src/platform/cursor-theme.ts
+++ b/src/renderer/src/platform/cursor-theme.ts
@@ -67,6 +67,13 @@ const cursorDefinitions: CursorDefinition[] = [
   { variable: '--cursor-selection-rotate-nw', source: cursorRotateNw, builtinSource: builtinRotateNw, hotspot: [16, 16], fallback: 'crosshair' }
 ]
 
+export type CursorPreferenceSource = 'system' | 'moonsprite'
+
+export const cursorPreferenceSource = (variable: string, useLocalCursors: boolean): CursorPreferenceSource => {
+  const definition = cursorDefinitions.find((item) => item.variable === variable)
+  return useLocalCursors && !definition?.builtinSource ? 'system' : 'moonsprite'
+}
+
 const scaledCursorCache = new Map<string, Promise<string>>()
 let applicationGeneration = 0
 
@@ -96,15 +103,15 @@ const scaledCursorUrl = (source: string, scale: CursorScale): Promise<string> =>
 export async function applyCursorPreferences(useLocalCursors: boolean, scale: CursorScale): Promise<void> {
   const generation = ++applicationGeneration
   const root = document.documentElement.style
-  if (!useLocalCursors) {
-    for (const definition of cursorDefinitions) root.setProperty(definition.variable, definition.fallback)
-    return
-  }
   const values = await Promise.all(cursorDefinitions.map(async (definition) => {
+    if (cursorPreferenceSource(definition.variable, useLocalCursors) === 'system') {
+      return [definition.variable, definition.fallback] as const
+    }
     const builtinSource = definition.builtinSource ?? definition.source
+    const preferredSource = useLocalCursors ? builtinSource : definition.source
     const source = scale === 1
-      ? definition.source
-      : await scaledCursorUrl(definition.source, scale).catch(() => scaledCursorUrl(builtinSource, scale))
+      ? preferredSource
+      : await scaledCursorUrl(preferredSource, scale).catch(() => scaledCursorUrl(builtinSource, scale))
     const builtin = scale === 1 ? builtinSource : await scaledCursorUrl(builtinSource, scale)
     const hotspotX = Math.round(definition.hotspot[0] * scale)
     const hotspotY = Math.round(definition.hotspot[1] * scale)
diff --git a/src/renderer/src/platform/document-drop-events.test.ts b/src/renderer/src/platform/document-drop-events.test.ts
index cec381a..9677f87 100644
--- a/src/renderer/src/platform/document-drop-events.test.ts
+++ b/src/renderer/src/platform/document-drop-events.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import type { Event } from '@tauri-apps/api/event'
 import type { DragDropEvent } from '@tauri-apps/api/window'
-import { subscribeToNativeDocumentDrops } from './document-drop-events'
+import { subscribeToNativeDocumentDropSources, subscribeToNativeDocumentDrops } from './document-drop-events'
 
 describe('native document drop events', () => {
   it('forwards only completed Tauri drops and returns the native cleanup', async () => {
@@ -21,4 +21,19 @@ describe('native document drop events', () => {
     cleanup()
     expect(unlisten).toHaveBeenCalledOnce()
   })
+
+  it('keeps native drops working when one Tauri event source fails to subscribe', async () => {
+    let handler!: (event: Event<DragDropEvent>) => void
+    const cleanup = vi.fn()
+    const failing = { onDragDropEvent: vi.fn(async () => { throw new Error('window channel unavailable') }) }
+    const working = { onDragDropEvent: vi.fn(async (next: (event: Event<DragDropEvent>) => void) => { handler = next; return cleanup }) }
+    const onDrop = vi.fn()
+
+    const remove = await subscribeToNativeDocumentDropSources([failing, working], onDrop)
+    handler({ event: 'tauri://drag-drop', id: 3, payload: { type: 'drop', paths: ['D:\\gallery\\sprite.aseprite'], position: { x: 0, y: 0 } } as DragDropEvent })
+
+    expect(onDrop).toHaveBeenCalledWith(['D:\\gallery\\sprite.aseprite'])
+    remove()
+    expect(cleanup).toHaveBeenCalledOnce()
+  })
 })
diff --git a/src/renderer/src/platform/document-drop-events.ts b/src/renderer/src/platform/document-drop-events.ts
index 9b0fb83..4759606 100644
--- a/src/renderer/src/platform/document-drop-events.ts
+++ b/src/renderer/src/platform/document-drop-events.ts
@@ -1,7 +1,7 @@
 import type { Event, UnlistenFn } from '@tauri-apps/api/event'
 import type { DragDropEvent } from '@tauri-apps/api/window'
 
-interface NativeDocumentDropSource {
+export interface NativeDocumentDropSource {
   onDragDropEvent(handler: (event: Event<DragDropEvent>) => void): Promise<UnlistenFn>
 }
 
@@ -9,3 +9,13 @@ export const subscribeToNativeDocumentDrops = async (source: NativeDocumentDropS
   source.onDragDropEvent((event) => {
     if (event.payload.type === 'drop' && event.payload.paths?.length) onDrop(event.payload.paths)
   })
+
+export const subscribeToNativeDocumentDropSources = async (
+  sources: NativeDocumentDropSource[],
+  onDrop: (paths: string[]) => void
+): Promise<() => void> => {
+  const subscriptions = await Promise.allSettled(sources.map((source) => subscribeToNativeDocumentDrops(source, onDrop)))
+  const cleanups = subscriptions.flatMap((subscription) => subscription.status === 'fulfilled' ? [subscription.value] : [])
+  if (cleanups.length === 0) throw new Error('无法订阅原生文件拖入事件。')
+  return () => cleanups.forEach((cleanup) => cleanup())
+}
diff --git a/src/renderer/src/platform/document-drop-service.test.ts b/src/renderer/src/platform/document-drop-service.test.ts
new file mode 100644
index 0000000..c8dc104
--- /dev/null
+++ b/src/renderer/src/platform/document-drop-service.test.ts
@@ -0,0 +1,89 @@
+import { fireEvent, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { Event } from '@tauri-apps/api/event'
+import type { DragDropEvent } from '@tauri-apps/api/window'
+import { startDocumentDropService } from './document-drop-service'
+
+const dropEvent = (paths: string[]): Event<DragDropEvent> => ({
+  event: 'tauri://drag-drop',
+  id: 1,
+  payload: { type: 'drop', paths, position: { x: 0, y: 0 } } as DragDropEvent
+})
+
+afterEach(() => vi.restoreAllMocks())
+
+describe('document drop service', () => {
+  it('deduplicates the same file reported by native and Rust channels', async () => {
+    let nativeHandler!: (event: Event<DragDropEvent>) => void
+    let rustHandler!: (paths: string[]) => void
+    const nativeCleanup = vi.fn()
+    const rustCleanup = vi.fn()
+    const openPath = vi.fn(async () => true)
+    const onOpened = vi.fn()
+    const stop = startDocumentDropService({
+      openPath,
+      onOpened,
+      pathForFile: () => '',
+      desktop: true,
+      nativeSources: [{ onDragDropEvent: vi.fn(async (handler) => { nativeHandler = handler; return nativeCleanup }) }],
+      rustSubscriber: vi.fn(async (handler) => { rustHandler = handler; return rustCleanup }),
+      warn: vi.fn()
+    })
+
+    await waitFor(() => expect(nativeHandler).toBeTypeOf('function'))
+    nativeHandler(dropEvent(['D:\\Art\\sprite.moonsprite']))
+    rustHandler(['d:\\art\\SPRITE.MOONSPRITE'])
+
+    await waitFor(() => expect(openPath).toHaveBeenCalledOnce())
+    expect(openPath).toHaveBeenCalledWith('D:\\Art\\sprite.moonsprite')
+    expect(onOpened).toHaveBeenCalledOnce()
+    stop()
+    expect(nativeCleanup).toHaveBeenCalledOnce()
+    expect(rustCleanup).toHaveBeenCalledOnce()
+  })
+
+  it('keeps working when one native source fails and retries failed channels on focus', async () => {
+    let recoveredHandler!: (event: Event<DragDropEvent>) => void
+    const recoveredCleanup = vi.fn()
+    const source = {
+      onDragDropEvent: vi.fn(async (handler: (event: Event<DragDropEvent>) => void) => {
+        if (source.onDragDropEvent.mock.calls.length === 1) throw new Error('temporary failure')
+        recoveredHandler = handler
+        return recoveredCleanup
+      })
+    }
+    const openPath = vi.fn(async () => true)
+    const stop = startDocumentDropService({
+      openPath,
+      pathForFile: () => '',
+      desktop: true,
+      nativeSources: [source],
+      rustSubscriber: async () => { throw new Error('rust unavailable') },
+      warn: vi.fn()
+    })
+
+    await waitFor(() => expect(source.onDragDropEvent).toHaveBeenCalledOnce())
+    fireEvent.focus(window)
+    await waitFor(() => expect(source.onDragDropEvent).toHaveBeenCalledTimes(2))
+    recoveredHandler(dropEvent(['D:\\Art\\sprite.aseprite']))
+    await waitFor(() => expect(openPath).toHaveBeenCalledWith('D:\\Art\\sprite.aseprite'))
+
+    stop()
+    expect(recoveredCleanup).toHaveBeenCalledOnce()
+  })
+
+  it('keeps the HTML drop fallback active outside Tauri', async () => {
+    const openPath = vi.fn(async () => true)
+    const stop = startDocumentDropService({
+      openPath,
+      pathForFile: () => 'D:\\Art\\sprite.png',
+      desktop: false
+    })
+    const file = new File(['pixel'], 'sprite.png', { type: 'image/png' })
+
+    fireEvent.drop(window, { dataTransfer: { files: [file] } })
+
+    await waitFor(() => expect(openPath).toHaveBeenCalledWith('D:\\Art\\sprite.png'))
+    stop()
+  })
+})
diff --git a/src/renderer/src/platform/document-drop-service.ts b/src/renderer/src/platform/document-drop-service.ts
new file mode 100644
index 0000000..cc92d58
--- /dev/null
+++ b/src/renderer/src/platform/document-drop-service.ts
@@ -0,0 +1,95 @@
+import { listen, type UnlistenFn } from '@tauri-apps/api/event'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { normalizeDroppedDocumentPaths } from '@/core/document-drop'
+import { subscribeToNativeDocumentDrops, type NativeDocumentDropSource } from './document-drop-events'
+
+type RustDropSubscriber = (onDrop: (paths: string[]) => void) => Promise<UnlistenFn>
+
+export interface DocumentDropServiceOptions {
+  openPath(path: string): boolean | Promise<boolean>
+  pathForFile(file: File): string
+  onOpened?(): void
+  eventTarget?: Window
+  desktop?: boolean
+  nativeSources?: NativeDocumentDropSource[]
+  rustSubscriber?: RustDropSubscriber
+  dedupeMs?: number
+  now?: () => number
+  warn?: (message: string, error: unknown) => void
+}
+
+const defaultRustSubscriber: RustDropSubscriber = (onDrop) =>
+  listen<string[]>('app:file-drop', (event) => onDrop(event.payload))
+
+export function startDocumentDropService(options: DocumentDropServiceOptions): () => void {
+  const target = options.eventTarget ?? window
+  const desktop = options.desktop ?? '__TAURI_INTERNALS__' in window
+  const nativeSources = options.nativeSources ?? (desktop ? [getCurrentWebview(), getCurrentWindow()] : [])
+  const rustSubscriber = options.rustSubscriber ?? (desktop ? defaultRustSubscriber : undefined)
+  const dedupeMs = options.dedupeMs ?? 1_000
+  const now = options.now ?? Date.now
+  const warn = options.warn ?? ((message: string, error: unknown) => console.warn(message, error))
+  const recentlyOpened = new Map<string, number>()
+  const cleanups = new Map<string, () => void>()
+  const pending = new Set<string>()
+  let active = true
+
+  const openDroppedPaths = (paths: string[]): void => {
+    const timestamp = now()
+    for (const [key, openedAt] of recentlyOpened) {
+      if (timestamp - openedAt >= dedupeMs) recentlyOpened.delete(key)
+    }
+    for (const path of normalizeDroppedDocumentPaths(paths)) {
+      const key = path.toLowerCase()
+      if (recentlyOpened.has(key)) continue
+      recentlyOpened.set(key, timestamp)
+      void Promise.resolve(options.openPath(path)).then((opened) => {
+        if (active && opened) options.onOpened?.()
+      }).catch((error) => warn(`无法打开拖入文件：${path}`, error))
+    }
+  }
+
+  const subscribe = (key: string, create: () => Promise<() => void>): void => {
+    if (!active || cleanups.has(key) || pending.has(key)) return
+    pending.add(key)
+    void create().then((cleanup) => {
+      pending.delete(key)
+      if (!active) { cleanup(); return }
+      cleanups.set(key, cleanup)
+    }).catch((error) => {
+      pending.delete(key)
+      if (active) warn(`文件拖入通道订阅失败：${key}`, error)
+    })
+  }
+
+  const ensureDesktopSubscriptions = (): void => {
+    if (!desktop) return
+    nativeSources.forEach((source, index) => subscribe(`native-${index}`, () => subscribeToNativeDocumentDrops(source, openDroppedPaths)))
+    if (rustSubscriber) subscribe('rust-window-event', () => rustSubscriber(openDroppedPaths))
+  }
+
+  const dragOver = (event: DragEvent): void => event.preventDefault()
+  const drop = (event: DragEvent): void => {
+    event.preventDefault()
+    const paths = Array.from(event.dataTransfer?.files ?? []).map(options.pathForFile).filter(Boolean)
+    openDroppedPaths(paths)
+  }
+  const focus = (): void => ensureDesktopSubscriptions()
+
+  target.addEventListener('dragover', dragOver, true)
+  target.addEventListener('drop', drop, true)
+  target.addEventListener('focus', focus)
+  ensureDesktopSubscriptions()
+
+  return () => {
+    active = false
+    target.removeEventListener('dragover', dragOver, true)
+    target.removeEventListener('drop', drop, true)
+    target.removeEventListener('focus', focus)
+    for (const cleanup of cleanups.values()) cleanup()
+    cleanups.clear()
+    pending.clear()
+    recentlyOpened.clear()
+  }
+}
diff --git a/src/renderer/src/store/clipboard-service.test.ts b/src/renderer/src/store/clipboard-service.test.ts
index a99d6d9..579a2bc 100644
--- a/src/renderer/src/store/clipboard-service.test.ts
+++ b/src/renderer/src/store/clipboard-service.test.ts
@@ -41,4 +41,28 @@ describe('ClipboardService', () => {
 
     expect(selectionClipboardImage(service.getSelection()!).data).toEqual(red)
   })
+
+  it('retains the internal origin when the matching system image is read back', async () => {
+    const service = new ClipboardService()
+    service.setSelection({ width: 1, height: 1, originX: 7, originY: -2, pixels: new Uint32Array([0xff0000ff]), mask: new Uint8Array([1]) })
+
+    const clipboard = await service.readSelection(async () => ({ width: 1, height: 1, data: red }))
+
+    expect(clipboard).toMatchObject({ originX: 7, originY: -2 })
+  })
+
+  it('copies a complete layer collection at service boundaries', () => {
+    const service = new ClipboardService()
+    const pixels = new Uint8ClampedArray([255, 0, 0, 255])
+    service.setLayers({
+      layers: [{ name: 'top', width: 1, height: 1, offsetX: 3, offsetY: -2, visible: true, locked: false, opacity: 0.5, blendMode: 'multiply', description: 'note', displayColor: { r: 1, g: 2, b: 3, a: 255 }, groupKey: 'group-a', pixels }],
+      groups: [{ key: 'group-a', name: 'group', visible: true, locked: false, opacity: 1, blendMode: 'normal', parentKey: null }]
+    })
+    pixels[0] = 0
+
+    const copied = service.getLayers()
+    expect(copied?.layers[0].pixels[0]).toBe(255)
+    copied!.layers[0].pixels[0] = 0
+    expect(service.getLayers()?.layers[0].pixels[0]).toBe(255)
+  })
 })
diff --git a/src/renderer/src/store/clipboard-service.ts b/src/renderer/src/store/clipboard-service.ts
index 6a391ec..617896e 100644
--- a/src/renderer/src/store/clipboard-service.ts
+++ b/src/renderer/src/store/clipboard-service.ts
@@ -4,6 +4,8 @@ import { packColor, unpackColor } from '@/core/raster'
 export interface SelectionClipboard {
   width: number
   height: number
+  originX?: number
+  originY?: number
   pixels: Uint32Array
   mask: Uint8Array
 }
@@ -18,23 +20,53 @@ export interface LayerClipboard {
   locked: boolean
   opacity: number
   blendMode: RasterLayer['blendMode']
+  displayColor?: RasterLayer['displayColor']
+  description?: string
+  groupKey?: string | null
   pixels: Uint8ClampedArray
 }
 
+export interface LayerGroupClipboard {
+  key: string
+  name: string
+  visible: boolean
+  locked: boolean
+  opacity: number
+  blendMode: RasterLayer['blendMode']
+  displayColor?: RasterLayer['displayColor']
+  description?: string
+  parentKey?: string | null
+}
+
+export interface LayerCollectionClipboard {
+  sourceDocumentId?: string
+  layers: LayerClipboard[]
+  groups: LayerGroupClipboard[]
+}
+
 const MAX_CLIPBOARD_PIXELS = 16 * 1024 * 1024
 
 const cloneSelectionClipboard = (clipboard: SelectionClipboard): SelectionClipboard => ({
   width: clipboard.width,
   height: clipboard.height,
+  originX: clipboard.originX,
+  originY: clipboard.originY,
   pixels: clipboard.pixels.slice(),
   mask: clipboard.mask.slice()
 })
 
 const cloneLayerClipboard = (clipboard: LayerClipboard): LayerClipboard => ({
   ...clipboard,
+  displayColor: clipboard.displayColor ? { ...clipboard.displayColor } : undefined,
   pixels: clipboard.pixels.slice()
 })
 
+const cloneLayerCollectionClipboard = (clipboard: LayerCollectionClipboard): LayerCollectionClipboard => ({
+  sourceDocumentId: clipboard.sourceDocumentId,
+  layers: clipboard.layers.map(cloneLayerClipboard),
+  groups: clipboard.groups.map((group) => ({ ...group, displayColor: group.displayColor ? { ...group.displayColor } : undefined }))
+})
+
 export const selectionClipboardFromImage = (image: ClipboardImage): SelectionClipboard | null => {
   const pixels = image.width * image.height
   if (!Number.isSafeInteger(pixels) || pixels < 1 || pixels > MAX_CLIPBOARD_PIXELS || image.data.length !== pixels * 4) return null
@@ -69,19 +101,19 @@ export const selectionClipboardImage = (clipboard: SelectionClipboard): Clipboar
 
 export class ClipboardService {
   private selection: SelectionClipboard | null = null
-  private layer: LayerClipboard | null = null
+  private layers: LayerCollectionClipboard | null = null
 
   clearSelection(): void {
     this.selection = null
   }
 
   clearLayer(): void {
-    this.layer = null
+    this.layers = null
   }
 
   setSelection(clipboard: SelectionClipboard): void {
     this.selection = cloneSelectionClipboard(clipboard)
-    this.layer = null
+    this.layers = null
   }
 
   getSelection(): SelectionClipboard | null {
@@ -89,12 +121,20 @@ export class ClipboardService {
   }
 
   setLayer(clipboard: LayerClipboard): void {
-    this.layer = cloneLayerClipboard(clipboard)
+    this.setLayers({ layers: [clipboard], groups: [] })
+  }
+
+  setLayers(clipboard: LayerCollectionClipboard): void {
+    this.layers = cloneLayerCollectionClipboard(clipboard)
     this.selection = null
   }
 
   getLayer(): LayerClipboard | null {
-    return this.layer ? cloneLayerClipboard(this.layer) : null
+    return this.layers?.layers.length === 1 && this.layers.groups.length === 0 ? cloneLayerClipboard(this.layers.layers[0]) : null
+  }
+
+  getLayers(): LayerCollectionClipboard | null {
+    return this.layers ? cloneLayerCollectionClipboard(this.layers) : null
   }
 
   async readSelection(readSystemImage: () => Promise<ClipboardImage | null>): Promise<SelectionClipboard | null> {
@@ -102,6 +142,9 @@ export class ClipboardService {
     try {
       const image = await readSystemImage()
       const system = image ? selectionClipboardFromImage(image) : null
+      if (system && internal && system.width === internal.width && system.height === internal.height
+        && system.pixels.every((value, index) => value === internal.pixels[index])
+        && system.mask.every((value, index) => value === internal.mask[index])) return internal
       return system ?? internal
     } catch {
       return internal
diff --git a/src/renderer/src/store/workspace-history.ts b/src/renderer/src/store/workspace-history.ts
index c166917..00fd831 100644
--- a/src/renderer/src/store/workspace-history.ts
+++ b/src/renderer/src/store/workspace-history.ts
@@ -1,25 +1,35 @@
 import type { SpriteDocument } from '@shared/types'
-import { getActiveLayer, getLayer } from '@/core/document'
+import { getActiveLayer } from '@/core/document'
 import { decodeProject, encodeProject } from '@/core/project-format'
 import type { LayerMergeSuccess } from '@/core/layer-merge'
 import type { AdjustmentSnapshot, DocumentSession } from './workspace-types'
 import { touch } from './workspace-session'
 
-export function captureAdjustmentSnapshot(session: DocumentSession): AdjustmentSnapshot {
-  const layer = getActiveLayer(session.document)
+const adjustmentTargetLayerIds = (session: DocumentSession): string[] => {
+  if (session.selection) return [getActiveLayer(session.document).id]
+  const selected = session.selectedLayerIds.filter((id) => session.document.layers.some((layer) => layer.id === id))
+  return [...new Set(selected.length > 0 ? selected : [getActiveLayer(session.document).id])]
+}
+
+export function captureAdjustmentSnapshot(session: DocumentSession, targetLayerIds = adjustmentTargetLayerIds(session)): AdjustmentSnapshot {
   return {
-    layerId: layer.id,
-    pixels: layer.format === 'rgba' ? new Uint8ClampedArray(layer.pixels) : new Uint32Array(layer.pixels),
+    layers: targetLayerIds.flatMap((layerId) => {
+      const layer = session.document.layers.find((candidate) => candidate.id === layerId)
+      return layer ? [{ layerId, pixels: layer.format === 'rgba' ? new Uint8ClampedArray(layer.pixels) : new Uint32Array(layer.pixels) }] : []
+    }),
     palette: session.document.palette.map((entry) => ({ ...entry, color: { ...entry.color } })),
     nextColorId: session.document.nextColorId
   }
 }
 
 export function restoreAdjustmentSnapshot(session: DocumentSession, snapshot: AdjustmentSnapshot): void {
-  const layer = getLayer(session.document, snapshot.layerId)
-  if (layer.format === 'rgba' && snapshot.pixels instanceof Uint8ClampedArray) layer.pixels = new Uint8ClampedArray(snapshot.pixels)
-  else if (layer.format === 'indexed' && snapshot.pixels instanceof Uint32Array) layer.pixels = new Uint32Array(snapshot.pixels)
-  else throw new Error('调整预览的图层格式已发生变化。')
+  for (const layerSnapshot of snapshot.layers) {
+    const layer = session.document.layers.find((candidate) => candidate.id === layerSnapshot.layerId)
+    if (!layer) continue
+    if (layer.format === 'rgba' && layerSnapshot.pixels instanceof Uint8ClampedArray) layer.pixels = new Uint8ClampedArray(layerSnapshot.pixels)
+    else if (layer.format === 'indexed' && layerSnapshot.pixels instanceof Uint32Array) layer.pixels = new Uint32Array(layerSnapshot.pixels)
+    else throw new Error('调整预览的图层格式已发生变化。')
+  }
   session.document.palette = snapshot.palette.map((entry) => ({ ...entry, color: { ...entry.color } }))
   session.document.nextColorId = snapshot.nextColorId
 }
@@ -35,23 +45,27 @@ export function restoreDocumentSnapshot(target: SpriteDocument, data: Uint8Array
 export interface LayerUiSnapshot {
   selectedLayerIds: string[]
   selectedGroupId: string | null
+  selectedGroupIds: string[]
   collapsedGroupIds: string[]
 }
 
 export const captureLayerUi = (session: DocumentSession): LayerUiSnapshot => ({
   selectedLayerIds: [...session.selectedLayerIds],
   selectedGroupId: session.selectedGroupId,
+  selectedGroupIds: [...session.selectedGroupIds],
   collapsedGroupIds: [...session.collapsedGroupIds]
 })
 
 const restoreLayerUi = (session: DocumentSession, snapshot: LayerUiSnapshot): void => {
   session.selectedLayerIds = [...snapshot.selectedLayerIds]
   session.selectedGroupId = snapshot.selectedGroupId
+  session.selectedGroupIds = [...snapshot.selectedGroupIds]
   session.collapsedGroupIds = [...snapshot.collapsedGroupIds]
 }
 
 export function commitLayerMerge(session: DocumentSession, beforeDocument: Uint8Array, beforeUi: LayerUiSnapshot, result: LayerMergeSuccess, label: string): void {
   session.selectedGroupId = null
+  session.selectedGroupIds = []
   session.selectedLayerIds = [result.layerId]
   session.collapsedGroupIds = session.collapsedGroupIds.filter((id) => !result.removedGroupIds.includes(id))
   touch(session)
diff --git a/src/renderer/src/store/workspace-session.ts b/src/renderer/src/store/workspace-session.ts
index 346b638..9d3b89b 100644
--- a/src/renderer/src/store/workspace-session.ts
+++ b/src/renderer/src/store/workspace-session.ts
@@ -109,6 +109,7 @@ export function persistToolSettings(session: DocumentSession): void {
     proceduralAntialiasPreferenceVersion: 1,
     brushProfiles: profiles,
     shapeKind: session.shapeKind,
+    shapeRatio: session.shapeRatio ? { ...session.shapeRatio } : null,
     fillMode: session.fillMode,
     moveAutoSelect: session.moveAutoSelect,
     selectionKind: session.selectionKind,
@@ -154,6 +155,7 @@ export const sessionFromDocument = (document: SpriteDocument): DocumentSession =
     proceduralAntialias: settings.proceduralAntialias,
     proceduralAntialiasStrength: settings.proceduralAntialiasStrength,
     shapeKind: settings.shapeKind,
+    shapeRatio: typeof settings.shapeRatio === 'number' ? { width: settings.shapeRatio, height: 1 } : settings.shapeRatio ? { ...settings.shapeRatio } : null,
     fillMode: settings.fillMode,
     moveAutoSelect: settings.moveAutoSelect,
     selection: null,
@@ -167,13 +169,16 @@ export const sessionFromDocument = (document: SpriteDocument): DocumentSession =
     canvasResizePreview: null,
     outlinePreview: null,
     pendingPaste: null,
-    view: { zoom: 16, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false, showGrid: false, relativeLuminance: false },
+    view: { zoom: 16, panX: 0, panY: 0, rotation: 0, mirrored: false, mirroredVertical: false, showGrid: false, relativeLuminance: false, showSelectionOutline: true },
+    viewportSize: { width: 0, height: 0 },
     paletteSelectionId: document.palette.find((entry) => entry.id !== 0)?.id ?? document.palette[0]?.id ?? null,
     selectedPaletteIds: document.palette.find((entry) => entry.id !== 0)?.id !== undefined
       ? [document.palette.find((entry) => entry.id !== 0)!.id]
       : document.palette[0] ? [document.palette[0].id] : [],
     selectedGroupId: null,
+    selectedGroupIds: [],
     selectedLayerIds: [document.activeLayerId],
+    layerSelectionAnchorId: document.activeLayerId,
     collapsedGroupIds: [],
     revision: 0,
     recoverySuppressed: false
diff --git a/src/renderer/src/store/workspace-types.ts b/src/renderer/src/store/workspace-types.ts
index 68cef35..9880a2c 100644
--- a/src/renderer/src/store/workspace-types.ts
+++ b/src/renderer/src/store/workspace-types.ts
@@ -16,6 +16,7 @@ import type {
   SelectionMask,
   SelectionMode,
   ShapeKind,
+  ShapeRatio,
   SpriteDocument,
   ToolId,
   ViewState
@@ -32,8 +33,7 @@ export interface CanvasResizePreview {
 }
 
 export interface AdjustmentSnapshot {
-  layerId: string
-  pixels: Uint8ClampedArray | Uint32Array
+  layers: Array<{ layerId: string; pixels: Uint8ClampedArray | Uint32Array }>
   palette: SpriteDocument['palette']
   nextColorId: number
 }
@@ -52,6 +52,8 @@ export interface FloatingPaste {
   source: SelectionTransformSource
   target: SelectionMask
   previewEdit: PixelEdit
+  copy: boolean
+  label: string
 }
 
 export interface BrushProfile {
@@ -89,6 +91,7 @@ export interface DocumentSession {
   proceduralAntialias: boolean
   proceduralAntialiasStrength: number
   shapeKind: ShapeKind
+  shapeRatio: ShapeRatio | null
   fillMode: FillMode
   moveAutoSelect: boolean
   selection: SelectionMask | null
@@ -103,10 +106,13 @@ export interface DocumentSession {
   outlinePreview: OutlinePreview | null
   pendingPaste: FloatingPaste | null
   view: ViewState
+  viewportSize: { width: number; height: number }
   paletteSelectionId: number | null
   selectedPaletteIds: number[]
   selectedGroupId: string | null
+  selectedGroupIds: string[]
   selectedLayerIds: string[]
+  layerSelectionAnchorId: string | null
   collapsedGroupIds: string[]
   revision: number
   recoverySuppressed: boolean
diff --git a/src/renderer/src/store/workspace.test.ts b/src/renderer/src/store/workspace.test.ts
index 021860a..abc517d 100644
--- a/src/renderer/src/store/workspace.test.ts
+++ b/src/renderer/src/store/workspace.test.ts
@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { MoonSpriteApi } from '@shared/types'
 import { compositeDocument, createDocument, createLayer, getActiveLayer, isLayerEffectivelyLocked, isLayerEffectivelyVisible, readLayerColor, readLayerColorAt, writeLayerColor } from '@/core/document'
 import { revertPixelEdit } from '@/core/history'
-import { applySelectionTransform } from '@/core/tools'
+import { applySelectionTransform, applySelectionTranslationPreview, captureSelectionTransform, selectionTranslationPreviewEdit } from '@/core/tools'
 import { builtInPalettes } from '@/core/built-in-palettes'
 import { createProceduralBrush } from '@/core/brushes'
 import { registerViewPreviewFlusher } from '@/core/view-preview-lifecycle'
@@ -31,6 +31,14 @@ beforeEach(() => {
   useWorkspace.setState({ sessions: [], activeId: null, message: null, saveProgress: null, dialog: null })
 })
 
+it('stores shape ratios with at most one decimal place', () => {
+  useWorkspace.getState().addSession(createDocument('shape ratio', 8, 8, 'rgba'))
+
+  useWorkspace.getState().setShapeRatio({ width: 1.26, height: 3.94 })
+
+  expect(useWorkspace.getState().sessions[0].shapeRatio).toEqual({ width: 1.3, height: 3.9 })
+})
+
 describe('layer properties', () => {
   it('clears an optional display color and restores it with one undo', () => {
     const document = createDocument('layer marker', 2, 2, 'rgba')
@@ -47,6 +55,105 @@ describe('layer properties', () => {
   })
 })
 
+describe('cross-document layer clipboard', () => {
+  it('pastes multiple selected layers with their properties as one undo step', () => {
+    const source = createDocument('source', 4, 4, 'rgba')
+    const bottom = getActiveLayer(source)
+    bottom.name = 'Bottom'
+    bottom.offsetX = -2
+    bottom.opacity = 0.5
+    bottom.description = 'base note'
+    const top = createLayer('Top', 2, 3, 'rgba')
+    top.offsetX = 5
+    top.offsetY = 6
+    top.blendMode = 'multiply'
+    top.displayColor = { ...blue }
+    source.layers.push(top)
+    source.activeLayerId = top.id
+    useWorkspace.getState().addSession(source)
+    useWorkspace.getState().selectLayer(bottom.id)
+    useWorkspace.getState().selectLayer(top.id, true)
+
+    useWorkspace.getState().copySelectedLayersToClipboard()
+    const target = createDocument('target', 4, 4, 'indexed')
+    useWorkspace.getState().addSession(target)
+    useWorkspace.getState().pasteLayersFromClipboard()
+
+    const pasted = target.layers.slice(1)
+    expect(pasted.map((layer) => layer.name)).toEqual(['Bottom 副本', 'Top 副本'])
+    expect(pasted[0]).toMatchObject({ offsetX: -2, opacity: 0.5, description: 'base note' })
+    expect(pasted[1]).toMatchObject({ offsetX: 5, offsetY: 6, blendMode: 'multiply', displayColor: blue })
+    useWorkspace.getState().undo()
+    expect(target.layers).toHaveLength(1)
+  })
+
+  it('preserves nested group structure and removes the whole paste with one undo', () => {
+    const source = createDocument('group source', 3, 3, 'rgba')
+    const childLayer = getActiveLayer(source)
+    const parentLayer = createLayer('Parent layer', 3, 3, 'rgba')
+    source.layers.push(parentLayer)
+    source.groups.push(
+      { id: 'parent', name: 'Parent', parentGroupId: null, visible: true, locked: false, opacity: 0.75, blendMode: 'multiply', description: 'parent note' },
+      { id: 'child', name: 'Child', parentGroupId: 'parent', visible: false, locked: true, opacity: 0.5, blendMode: 'screen', displayColor: { ...red } }
+    )
+    childLayer.groupId = 'child'
+    parentLayer.groupId = 'parent'
+    useWorkspace.getState().addSession(source)
+    useWorkspace.getState().selectGroup('parent')
+    useWorkspace.getState().copySelectedLayersToClipboard()
+
+    const target = createDocument('group target', 3, 3, 'rgba')
+    useWorkspace.getState().addSession(target)
+    expect(useWorkspace.getState().pasteLayersFromClipboard()).toBe(true)
+
+    const parent = target.groups.find((group) => group.name === 'Parent 副本')
+    const child = target.groups.find((group) => group.name === 'Child 副本')
+    expect(parent).toMatchObject({ opacity: 0.75, blendMode: 'multiply', description: 'parent note' })
+    expect(child).toMatchObject({ parentGroupId: parent?.id, visible: false, locked: true, opacity: 0.5, blendMode: 'screen', displayColor: red })
+    expect(target.layers.find((layer) => layer.name === `${childLayer.name} 副本`)?.groupId).toBe(child?.id)
+    expect(target.layers.find((layer) => layer.name === 'Parent layer 副本')?.groupId).toBe(parent?.id)
+
+    useWorkspace.getState().undo()
+    expect(target.groups).toHaveLength(0)
+    expect(target.layers).toHaveLength(1)
+  })
+})
+
+describe('multi-layer deletion', () => {
+  it('deletes a selected nested group as one structural history entry', () => {
+    const document = createDocument('delete nested group', 2, 2, 'rgba')
+    const childLayer = getActiveLayer(document)
+    childLayer.groupId = 'child'
+    const rootLayer = createLayer('Root', 2, 2, 'rgba')
+    document.layers.push(rootLayer)
+    document.groups.push(
+      { id: 'parent', name: 'Parent', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' },
+      { id: 'child', name: 'Child', parentGroupId: 'parent', visible: true, locked: false, opacity: 1, blendMode: 'normal' }
+    )
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().selectGroup('parent')
+
+    useWorkspace.getState().deleteSelectedLayers()
+
+    expect(document.layers).toEqual([rootLayer])
+    expect(document.groups).toEqual([])
+    useWorkspace.getState().undo()
+    expect(document.layers).toContain(childLayer)
+    expect(document.groups.map((group) => group.id)).toEqual(['parent', 'child'])
+    expect(useWorkspace.getState().sessions[0].selectedGroupId).toBe('parent')
+  })
+
+  it('does not dirty the document when deletion would remove every layer', () => {
+    const document = createDocument('keep one layer', 2, 2, 'rgba')
+    useWorkspace.getState().addSession(document)
+
+    useWorkspace.getState().deleteSelectedLayers()
+
+    expect(document.dirty).toBe(false)
+    expect(useWorkspace.getState().sessions[0].history.canUndo).toBe(false)
+  })
+})
+
 describe('procedural brush settings', () => {
   it('creates a project brush from non-transparent selected pixels', () => {
     const document = createDocument('selection brush', 4, 3, 'rgba')
@@ -218,6 +325,40 @@ describe('workspace history', () => {
 })
 
 describe('foreground fill command', () => {
+  it('shares foreground and background colors across open documents', () => {
+    const first = createDocument('first colors', 1, 1, 'rgba')
+    const second = createDocument('second colors', 1, 1, 'rgba')
+    useWorkspace.getState().addSession(first)
+    useWorkspace.getState().addSession(second)
+
+    useWorkspace.getState().setPrimaryColor(red)
+    useWorkspace.getState().setSecondaryColor(blue)
+    useWorkspace.getState().setActive(first.id)
+
+    for (const session of useWorkspace.getState().sessions) {
+      expect(session.primaryColor).toEqual(red)
+      expect(session.secondaryColor).toEqual(blue)
+    }
+  })
+
+  it('shares a palette swatch selection with every open document', () => {
+    const first = createDocument('first palette', 1, 1, 'rgba')
+    const second = createDocument('second palette', 1, 1, 'rgba')
+    useWorkspace.getState().addSession(first)
+    useWorkspace.getState().addSession(second)
+    useWorkspace.getState().setActive(first.id)
+    let redId = first.palette.find((entry) => entry.color.r === red.r && entry.color.g === red.g && entry.color.b === red.b)?.id
+    if (redId === undefined) {
+      redId = 9001
+      first.palette.push({ id: redId, name: 'Red', color: red })
+    }
+    if (!first.paletteOrder.includes(redId)) first.paletteOrder.push(redId)
+
+    useWorkspace.getState().selectPaletteColor(redId)
+
+    expect(useWorkspace.getState().sessions.every((session) => session.primaryColor.r === red.r && session.primaryColor.g === red.g && session.primaryColor.b === red.b)).toBe(true)
+  })
+
   it('swaps foreground and background colors as one state update', () => {
     const document = createDocument('swap colors', 1, 1, 'rgba')
     useWorkspace.getState().addSession(document)
@@ -336,7 +477,63 @@ describe('selection clipboard', () => {
     expect(session.selection).toEqual(after)
   })
 
-  it('keeps pasted pixels floating until confirmation and preserves transparent destinations', async () => {
+  it('keeps the original destination background across repeated floating moves', () => {
+    const document = createDocument('floating selection background', 4, 1, 'rgba')
+    const layer = getActiveLayer(document)
+    const darkBlue = { r: 12, g: 38, b: 86, a: 255 }
+    writeLayerColor(document, layer, 0, red)
+    writeLayerColor(document, layer, 2, darkBlue)
+    useWorkspace.getState().addSession(document)
+    const before = { x: 0, y: 0, width: 1, height: 1 }
+    const firstTarget = { x: 2, y: 0, width: 1, height: 1 }
+    const source = captureSelectionTransform(document, before)!
+    const firstPreview = applySelectionTranslationPreview(document, source, firstTarget, false)
+    const firstEdit = selectionTranslationPreviewEdit(document, firstPreview)!
+
+    useWorkspace.getState().beginFloatingSelectionTransform(source, firstEdit, before, firstTarget, false, '移动选区内容')
+    expect(readLayerColorAt(document, layer, 2, 0)).toEqual(red)
+
+    const pending = useWorkspace.getState().sessions[0].pendingPaste!
+    revertPixelEdit(document, pending.previewEdit)
+    const secondTarget = { x: 3, y: 0, width: 1, height: 1 }
+    const secondPreview = applySelectionTranslationPreview(document, pending.source, secondTarget, pending.copy)
+    const secondEdit = selectionTranslationPreviewEdit(document, secondPreview)!
+    useWorkspace.getState().updateFloatingPastePreview(secondEdit, secondTarget)
+
+    expect(readLayerColorAt(document, layer, 2, 0)).toEqual(darkBlue)
+    expect(readLayerColorAt(document, layer, 3, 0)).toEqual(red)
+    useWorkspace.getState().commitFloatingPaste()
+    useWorkspace.getState().undo()
+    expect(readLayerColorAt(document, layer, 0, 0)).toEqual(red)
+    expect(readLayerColorAt(document, layer, 2, 0)).toEqual(darkBlue)
+  })
+
+  it('commits each repeated Ctrl copy from the current floating selection position', () => {
+    const document = createDocument('repeated floating copies', 4, 1, 'rgba')
+    const layer = getActiveLayer(document)
+    writeLayerColor(document, layer, 0, red)
+    useWorkspace.getState().addSession(document)
+
+    const copySelectionTo = (before: { x: number; y: number; width: number; height: number }, targetX: number): void => {
+      const target = { ...before, x: targetX }
+      const source = captureSelectionTransform(document, before)!
+      const preview = applySelectionTranslationPreview(document, source, target, true)
+      const edit = selectionTranslationPreviewEdit(document, preview)!
+      useWorkspace.getState().beginFloatingSelectionTransform(source, edit, before, target, true, '复制选区内容')
+      useWorkspace.getState().commitFloatingPaste()
+    }
+
+    copySelectionTo({ x: 0, y: 0, width: 1, height: 1 }, 1)
+    copySelectionTo({ x: 1, y: 0, width: 1, height: 1 }, 2)
+
+    expect([0, 1, 2].map((x) => readLayerColorAt(document, layer, x, 0))).toEqual([red, red, red])
+    useWorkspace.getState().undo()
+    expect(readLayerColorAt(document, layer, 0, 0)).toEqual(red)
+    expect(readLayerColorAt(document, layer, 1, 0)).toEqual(red)
+    expect(readLayerColorAt(document, layer, 2, 0)).toEqual(transparent)
+  })
+
+  it('keeps an original visible paste position floating until confirmation', async () => {
     const document = createDocument('clipboard', 4, 2, 'rgba')
     const source = getActiveLayer(document)
     if (source.format !== 'rgba') throw new Error('wrong layer mode')
@@ -354,7 +551,7 @@ describe('selection clipboard', () => {
     const pasted = getActiveLayer(document)
     expect(pasted.id).toBe(source.id)
     expect(readLayerColor(document, pasted, 0)).toEqual(red)
-    expect(readLayerColor(document, pasted, 1)).toEqual(red)
+    expect(readLayerColor(document, pasted, 1)).toEqual(transparent)
     expect(readLayerColor(document, pasted, 2)).toEqual(blue)
     expect(readLayerColor(document, source, 0)).toEqual(red)
     expect(useWorkspace.getState().sessions[0].selection?.mask).toEqual(Uint8Array.from([1, 0]))
@@ -372,11 +569,29 @@ describe('selection clipboard', () => {
 
     useWorkspace.getState().redo()
     expect(document.layers).toHaveLength(1)
-    expect(readLayerColor(document, getActiveLayer(document), 1)).toEqual(red)
+    expect(readLayerColor(document, getActiveLayer(document), 1)).toEqual(transparent)
     expect(readLayerColor(document, source, 0)).toEqual(red)
     expect(readLayerColor(document, source, 2)).toEqual(blue)
   })
 
+  it('pastes a copied selection as an undoable new layer at its visible origin', async () => {
+    const document = createDocument('paste layer', 8, 8, 'rgba')
+    const source = getActiveLayer(document)
+    writeLayerColor(document, source, 3 * document.width + 2, red)
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().setSelection({ x: 2, y: 3, width: 1, height: 1 })
+    useWorkspace.getState().copySelection()
+
+    expect(await useWorkspace.getState().pasteAsNewLayer()).toBe(true)
+
+    const pasted = getActiveLayer(document)
+    expect(document.layers).toHaveLength(2)
+    expect(pasted).toMatchObject({ offsetX: 2, offsetY: 3, width: 1, height: 1 })
+    expect(readLayerColor(document, pasted, 0)).toEqual(red)
+    useWorkspace.getState().undo()
+    expect(document.layers).toHaveLength(1)
+  })
+
   it('moves a floating paste without clearing its old destination and cancels cleanly', async () => {
     const document = createDocument('floating paste', 4, 1, 'rgba')
     const layer = getActiveLayer(document)
@@ -536,6 +751,132 @@ describe('visible palette independence', () => {
 })
 
 describe('nested layer groups', () => {
+  it('creates an empty group when the layer panel has no selection', () => {
+    const document = createDocument('empty group', 2, 2, 'rgba')
+    const layer = getActiveLayer(document)
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().clearLayerSelection()
+
+    useWorkspace.getState().createLayerGroup()
+
+    expect(document.groups).toHaveLength(1)
+    expect(layer.groupId ?? null).toBeNull()
+  })
+
+  it('creates a new layer in the selected group or selected layer container', async () => {
+    const document = createDocument('grouped new layer', 2, 2, 'rgba')
+    const member = getActiveLayer(document)
+    document.groups.push({ id: 'group', name: '组', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    member.groupId = 'group'
+    useWorkspace.getState().addSession(document)
+
+    useWorkspace.getState().selectLayer(member.id)
+    await useWorkspace.getState().addLayer()
+    expect(getActiveLayer(document).groupId).toBe('group')
+
+    useWorkspace.getState().selectGroup('group')
+    await useWorkspace.getState().addLayer()
+    expect(getActiveLayer(document).groupId).toBe('group')
+  })
+
+  it('blocks deleting a parent group when any descendant is explicitly locked', () => {
+    const document = createDocument('descendant lock deletion', 2, 2, 'rgba')
+    const layer = getActiveLayer(document)
+    document.groups.push(
+      { id: 'parent', name: '父组', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' },
+      { id: 'child', name: '子组', parentGroupId: 'parent', visible: true, locked: true, opacity: 1, blendMode: 'normal' }
+    )
+    layer.groupId = 'child'
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().selectGroup('parent')
+
+    useWorkspace.getState().deleteSelectedLayers()
+
+    expect(document.groups.map((group) => group.id)).toEqual(['parent', 'child'])
+  })
+
+  it('does not allow a child layer to unlock while an ancestor group is locked', () => {
+    const document = createDocument('ancestor lock editing', 2, 2, 'rgba')
+    const layer = getActiveLayer(document)
+    layer.locked = true
+    document.groups.push({ id: 'parent', name: '父组', parentGroupId: null, visible: true, locked: true, opacity: 1, blendMode: 'normal' })
+    layer.groupId = 'parent'
+    useWorkspace.getState().addSession(document)
+
+    useWorkspace.getState().setLayerPropertiesWithBlend(layer.id, layer.name, layer.opacity, layer.blendMode, false)
+
+    expect(layer.locked).toBe(true)
+  })
+  it('deletes an empty selected group and restores it with one undo', () => {
+    const document = createDocument('empty group deletion', 2, 2, 'rgba')
+    document.groups.push({ id: 'empty', name: '空组', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().selectGroup('empty')
+
+    useWorkspace.getState().deleteSelectedLayers()
+    expect(document.groups).toHaveLength(0)
+    useWorkspace.getState().undo()
+    expect(document.groups.map((group) => group.id)).toEqual(['empty'])
+  })
+
+  it('rejects deleting or moving locked layers and groups', () => {
+    const document = createDocument('locked structure', 2, 2, 'rgba')
+    const layer = getActiveLayer(document)
+    document.groups.push({ id: 'locked-group', name: '锁定组', parentGroupId: null, visible: true, locked: true, opacity: 1, blendMode: 'normal' })
+    layer.groupId = 'locked-group'
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().selectGroup('locked-group')
+
+    useWorkspace.getState().deleteSelectedLayers()
+    expect(document.groups.map((group) => group.id)).toEqual(['locked-group'])
+    expect(document.layers.map((candidate) => candidate.id)).toEqual([layer.id])
+    useWorkspace.getState().moveGroupToRootEdge('locked-group', 'bottom')
+    expect(useWorkspace.getState().sessions[0].history.canUndo).toBe(false)
+  })
+
+  it('uses Ctrl for discrete selection and Shift for the visible layer range', () => {
+    const document = createDocument('layer range selection', 2, 2, 'rgba')
+    const bottom = getActiveLayer(document)
+    const middle = createLayer('Middle', 2, 2, 'rgba')
+    const top = createLayer('Top', 2, 2, 'rgba')
+    document.layers.push(middle, top)
+    useWorkspace.getState().addSession(document)
+
+    useWorkspace.getState().selectLayer(top.id)
+    useWorkspace.getState().selectLayer(bottom.id, 'range')
+    expect(useWorkspace.getState().sessions[0].selectedLayerIds).toEqual([top.id, middle.id, bottom.id])
+
+    useWorkspace.getState().selectLayer(middle.id, 'toggle')
+    expect(useWorkspace.getState().sessions[0].selectedLayerIds).toEqual([top.id, bottom.id])
+  })
+
+  it('includes groups in a Shift range and deletes the mixed selection in one step', () => {
+    const document = createDocument('mixed layer range', 2, 2, 'rgba')
+    const bottom = getActiveLayer(document)
+    bottom.name = 'Bottom'
+    const member = createLayer('Member', 2, 2, 'rgba')
+    member.groupId = 'group'
+    const outside = createLayer('Outside', 2, 2, 'rgba')
+    document.layers.push(member, outside)
+    document.groups.push({ id: 'group', name: 'Group', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    useWorkspace.getState().addSession(document)
+
+    useWorkspace.getState().selectGroup('group')
+    useWorkspace.getState().selectLayer(bottom.id, 'range')
+    const selected = useWorkspace.getState().sessions[0]
+    expect(selected.selectedGroupIds).toEqual(['group'])
+    expect(selected.selectedLayerIds).toEqual([member.id, bottom.id])
+
+    useWorkspace.getState().deleteSelectedLayers()
+    expect(document.groups).toHaveLength(0)
+    expect(document.layers.map((layer) => layer.id)).toEqual([outside.id])
+
+    useWorkspace.getState().undo()
+    expect(document.groups.map((group) => group.id)).toEqual(['group'])
+    expect(document.layers.map((layer) => layer.id)).toEqual([bottom.id, member.id, outside.id])
+    expect(useWorkspace.getState().sessions[0].selectedGroupIds).toEqual(['group'])
+  })
+
   it('selects descendant layers and prevents moving a parent into its child', () => {
     const document = createDocument('nested groups', 2, 2, 'rgba')
     const layer = getActiveLayer(document)
@@ -611,6 +952,20 @@ describe('nested layer groups', () => {
     expect(second.groupId).toBe('group')
   })
 
+  it('creates every new root layer at the visible top', async () => {
+    const document = createDocument('new layers on top', 2, 2, 'rgba')
+    const original = getActiveLayer(document)
+    useWorkspace.getState().addSession(document)
+
+    await useWorkspace.getState().addLayer()
+    const firstCreated = getActiveLayer(document)
+    useWorkspace.getState().selectLayer(original.id)
+    await useWorkspace.getState().addLayer()
+    const latestCreated = getActiveLayer(document)
+
+    expect(document.layers.map((layer) => layer.id)).toEqual([original.id, firstCreated.id, latestCreated.id])
+  })
+
   it('reorders a complete group relative to another group and restores it on undo', async () => {
     const document = createDocument('reorder groups', 2, 2, 'rgba')
     const first = getActiveLayer(document)
@@ -632,6 +987,174 @@ describe('nested layer groups', () => {
     expect(document.layers.map((layer) => layer.id)).toEqual([first.id, second.id])
     expect(document.groups.map((group) => group.id)).toEqual(['group-a', 'group-b'])
   })
+
+  it('pastes a copied group beside the currently selected object', () => {
+    const document = createDocument('nested group paste', 2, 2, 'rgba')
+    const layer = getActiveLayer(document)
+    layer.groupId = 'child'
+    document.groups.push(
+      { id: 'parent', name: 'Parent', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' },
+      { id: 'child', name: 'Child', parentGroupId: 'parent', visible: true, locked: false, opacity: 1, blendMode: 'normal' },
+      { id: 'sibling', name: 'Sibling', parentGroupId: 'parent', visible: true, locked: false, opacity: 1, blendMode: 'normal' }
+    )
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().selectGroup('child')
+
+    useWorkspace.getState().copySelectedLayersToClipboard()
+    useWorkspace.getState().selectGroup('sibling')
+    expect(useWorkspace.getState().pasteLayersFromClipboard()).toBe(true)
+
+    const copy = document.groups.find((group) => group.name === 'Child 副本')
+    expect(copy?.parentGroupId).toBe('parent')
+  })
+
+  it('pastes plain layers into the selected container and always places them at its top', () => {
+    const source = createDocument('plain layer source', 2, 2, 'rgba')
+    getActiveLayer(source).name = 'Source'
+    useWorkspace.getState().addSession(source)
+    useWorkspace.getState().copySelectedLayersToClipboard()
+
+    const target = createDocument('plain layer target', 2, 2, 'rgba')
+    const member = getActiveLayer(target)
+    member.name = 'Member'
+    member.groupId = 'target-group'
+    const rootBottom = createLayer('Root Bottom', 2, 2, 'rgba')
+    const rootTop = createLayer('Root Top', 2, 2, 'rgba')
+    target.layers.push(rootBottom, rootTop)
+    target.groups.push({ id: 'target-group', name: 'Target Group', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    useWorkspace.getState().addSession(target)
+    useWorkspace.getState().setActive(target.id)
+
+    useWorkspace.getState().selectGroup('target-group')
+    expect(useWorkspace.getState().pasteLayersFromClipboard()).toBe(true)
+    const groupedCopy = target.layers.find((layer) => layer.name === 'Source 副本' && layer.groupId === 'target-group')!
+    expect(groupedCopy).toBeDefined()
+    expect(target.layers.indexOf(groupedCopy)).toBeGreaterThan(target.layers.indexOf(member))
+
+    useWorkspace.getState().selectLayer(rootBottom.id)
+    expect(useWorkspace.getState().pasteLayersFromClipboard()).toBe(true)
+    const rootCopies = target.layers.filter((layer) => layer.name === 'Source 副本' && !layer.groupId)
+    expect(target.layers.indexOf(rootCopies.at(-1)!)).toBeGreaterThan(target.layers.indexOf(rootTop))
+
+    useWorkspace.getState().clearLayerSelection()
+    expect(useWorkspace.getState().pasteLayersFromClipboard()).toBe(true)
+    const latestRootCopy = target.layers.filter((layer) => layer.name === 'Source 副本' && !layer.groupId).at(-1)!
+    expect(target.layers.indexOf(latestRootCopy)).toBe(Math.max(...target.layers.filter((layer) => !layer.groupId).map((layer) => target.layers.indexOf(layer))))
+  })
+
+  it('pastes a copied group into the selected objects parent at the top of that level', () => {
+    const source = createDocument('group source', 2, 2, 'rgba')
+    getActiveLayer(source).groupId = 'source-group'
+    source.groups.push({ id: 'source-group', name: 'Source Group', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' })
+    useWorkspace.getState().addSession(source)
+    useWorkspace.getState().selectGroup('source-group')
+    useWorkspace.getState().copySelectedLayersToClipboard()
+
+    const target = createDocument('group target', 2, 2, 'rgba')
+    const childAMember = getActiveLayer(target)
+    childAMember.groupId = 'child-a'
+    const childBMember = createLayer('Child B member', 2, 2, 'rgba')
+    childBMember.groupId = 'child-b'
+    target.layers.push(childBMember)
+    target.groups.push(
+      { id: 'parent', name: 'Parent', parentGroupId: null, visible: true, locked: false, opacity: 1, blendMode: 'normal' },
+      { id: 'child-a', name: 'Child A', parentGroupId: 'parent', visible: true, locked: false, opacity: 1, blendMode: 'normal' },
+      { id: 'child-b', name: 'Child B', parentGroupId: 'parent', visible: true, locked: false, opacity: 1, blendMode: 'normal' }
+    )
+    useWorkspace.getState().addSession(target)
+    useWorkspace.getState().setActive(target.id)
+    useWorkspace.getState().selectGroup('child-a')
+
+    expect(useWorkspace.getState().pasteLayersFromClipboard()).toBe(true)
+    const copiedGroup = target.groups.find((group) => group.name === 'Source Group 副本')!
+    const copiedMember = target.layers.find((layer) => layer.groupId === copiedGroup.id)!
+    expect(copiedGroup.parentGroupId).toBe('parent')
+    expect(target.layers.indexOf(copiedMember)).toBeGreaterThan(target.layers.indexOf(childBMember))
+    expect(useWorkspace.getState().sessions.at(-1)?.selectedGroupId).toBeNull()
+    expect(useWorkspace.getState().sessions.at(-1)?.selectedGroupIds).toEqual([copiedGroup.id])
+    expect(useWorkspace.getState().sessions.at(-1)?.selectedLayerIds).toEqual([copiedMember.id])
+
+    useWorkspace.getState().undo()
+    expect(useWorkspace.getState().sessions.at(-1)?.selectedGroupId).toBe('child-a')
+    useWorkspace.getState().redo()
+    expect(useWorkspace.getState().sessions.at(-1)?.selectedGroupIds).toEqual([copiedGroup.id])
+    expect(useWorkspace.getState().sessions.at(-1)?.selectedLayerIds).toEqual([copiedMember.id])
+  })
+
+  it('allows locked layer metadata edits but preserves opacity and blend mode', () => {
+    const document = createDocument('locked metadata', 1, 1, 'rgba')
+    const layer = getActiveLayer(document)
+    layer.locked = true
+    layer.opacity = 0.5
+    layer.blendMode = 'multiply'
+    useWorkspace.getState().addSession(document)
+
+    useWorkspace.getState().setLayerPropertiesWithBlend(layer.id, '已重命名', 0.9, 'screen', true, red, '可编辑描述')
+
+    expect(layer).toMatchObject({ name: '已重命名', opacity: 0.5, blendMode: 'multiply', description: '可编辑描述' })
+    expect(layer.displayColor).toEqual(red)
+  })
+
+  it('preserves locked opacity through compatibility property setters', () => {
+    const document = createDocument('locked compatibility setters', 1, 1, 'rgba')
+    const layer = getActiveLayer(document)
+    layer.locked = true
+    layer.opacity = 0.5
+    useWorkspace.getState().addSession(document)
+
+    useWorkspace.getState().setLayerOpacity(layer.id, 0.9)
+    expect(document.dirty).toBe(false)
+    expect(useWorkspace.getState().sessions[0].history.canUndo).toBe(false)
+
+    useWorkspace.getState().setLayerProperties(layer.id, '已重命名', 0.8)
+
+    expect(layer.name).toBe('已重命名')
+    expect(layer.opacity).toBe(0.5)
+  })
+})
+
+describe('selection view commands', () => {
+  it('inverts the active mask with undo while outline visibility stays view-only', () => {
+    const document = createDocument('selection commands', 3, 2, 'rgba')
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().setSelection({ x: 0, y: 0, width: 1, height: 1 })
+
+    useWorkspace.getState().invertSelection()
+    const session = useWorkspace.getState().sessions[0]
+    expect(session.selection?.mask?.reduce((total, value) => total + value, 0)).toBe(5)
+    expect(document.dirty).toBe(false)
+
+    const undoBeforeToggle = session.history.canUndo
+    useWorkspace.getState().toggleSelectionOutline()
+    expect(session.view.showSelectionOutline).toBe(false)
+    expect(session.history.canUndo).toBe(undoBeforeToggle)
+
+    useWorkspace.getState().undo()
+    expect(session.selection).toEqual({ x: 0, y: 0, width: 1, height: 1 })
+  })
+})
+
+describe('multi-layer adjustments', () => {
+  it('adjusts every selected layer without a selection and undoes them together', () => {
+    const document = createDocument('multi adjustment', 1, 1, 'rgba')
+    const first = getActiveLayer(document)
+    const second = createLayer('Second', 1, 1, 'rgba')
+    writeLayerColor(document, first, 0, { r: 20, g: 20, b: 20, a: 255 })
+    writeLayerColor(document, second, 0, { r: 40, g: 40, b: 40, a: 255 })
+    document.layers.push(second)
+    document.activeLayerId = second.id
+    useWorkspace.getState().addSession(document)
+    useWorkspace.getState().selectLayer(first.id)
+    useWorkspace.getState().selectLayer(second.id, true)
+
+    useWorkspace.getState().applyActiveLayerAdjustment({ kind: 'brightness-contrast', brightness: 20, contrast: 0 })
+
+    expect(readLayerColor(document, first, 0).r).toBeGreaterThan(20)
+    expect(readLayerColor(document, second, 0).r).toBeGreaterThan(40)
+    useWorkspace.getState().undo()
+    expect(readLayerColor(document, first, 0).r).toBe(20)
+    expect(readLayerColor(document, second, 0).r).toBe(40)
+  })
 })
 
 describe('layer merge history', () => {
diff --git a/src/renderer/src/store/workspace.ts b/src/renderer/src/store/workspace.ts
index 066ff85..9761f50 100644
--- a/src/renderer/src/store/workspace.ts
+++ b/src/renderer/src/store/workspace.ts
@@ -1,26 +1,28 @@
 import { create } from 'zustand'
-import type { BlendMode, BrushPaintMode, BrushShape, BrushTexture, CanvasAnchor, ColorMode, FillMode, ImageBrush, ImageBrushSettings, ImageResizeInterpolation, OutlineDirections, OutlineKernel, OutlinePosition, ProceduralBrushId, ProceduralBrushSettings, RasterLayer, RecoveryRecord, RgbaColor, SelectionKind, SelectionMask, SelectionMode, SelectionRect, ShapeKind, SpriteDocument, ToolId, ViewState } from '@shared/types'
+import type { BlendMode, BrushPaintMode, BrushShape, BrushTexture, CanvasAnchor, ColorMode, FillMode, ImageBrush, ImageBrushSettings, ImageResizeInterpolation, LayerGroup, OutlineDirections, OutlineKernel, OutlinePosition, ProceduralBrushId, ProceduralBrushSettings, RasterLayer, RecoveryRecord, RgbaColor, SelectionKind, SelectionMask, SelectionMode, SelectionRect, ShapeKind, ShapeRatio, SpriteDocument, ToolId, ViewState } from '@shared/types'
 import { checkResourceLimit } from '@/core/resource-policy'
 import { beginPixelEdit, commitPixelEdit, HistoryStack, recordPixel, revertPixelEdit, type HistoryEntry, type PixelEdit } from '@/core/history'
-import { convertDocumentColorMode, createDocument, createId, createLayer, duplicateLayer, findOrAddPaletteColor, getDescendantGroupIds, getGroup, getLayerIdsInGroup, getLayer, getActiveLayer, isLayerEffectivelyLocked, isLayerEffectivelyVisible, layerContentBounds, readLayerColor, readLayerColorAt, resizeDocumentAt, resizeDocumentImage, writeLayerColor } from '@/core/document'
+import { convertDocumentColorMode, createDocument, createId, createLayer, duplicateLayer, findOrAddPaletteColor, getDescendantGroupIds, getGroup, getGroupLockingAncestor, getLayerIdsInGroup, getLayer, getActiveLayer, getLayerLockingGroup, isGroupEffectivelyLocked, isLayerEffectivelyLocked, isLayerEffectivelyVisible, layerContentBounds, readLayerColor, readLayerColorAt, resizeDocumentAt, resizeDocumentImage, writeLayerColor } from '@/core/document'
 import { decodeProject, encodeProject } from '@/core/project-format'
 import { flushViewPreview } from '@/core/view-preview-lifecycle'
 import { fileNameFromPath } from '@/core/document-files'
 import { createSelectionBrush } from '@/core/brushes'
 import { applySelectionTransform, clampSelection, clearSelection, fillSelectionOrCanvas, flipLayer, flipSelection, moveSelection, outlineSelection, transformSelectionCopy, type SelectionTransformSource } from '@/core/tools'
 import { colorEquals, packColor, pixelIndex, unpackColor } from '@/core/raster'
-import { flipSelectionMask, selectionContains, shiftSelection } from '@/core/selection'
+import { flipSelectionMask, invertSelectionMask, selectionContains, shiftSelection } from '@/core/selection'
 import { recordRecentProject } from '@/core/home-history'
 import { createProceduralBrush, isProceduralBrushId, normalizeProceduralBrushSettings, PROCEDURAL_BRUSH_IDS } from '@/core/brushes'
 import { mergeLayerDown, mergeLayerGroup, mergeRasterLayers, mergeVisibleLayers as mergeVisibleDocumentLayers, type LayerMergeSuccess } from '@/core/layer-merge'
 import { applyColorAdjustment, type ColorAdjustment } from '@/core/adjustments'
-import { assignGroupToGroup as assignGroupToGroupOperation, assignGroupToRoot as assignGroupToRootOperation, assignLayersAboveGroup as assignLayersAboveGroupOperation, assignLayersToGroup as assignLayersToGroupOperation, assignLayersToRoot as assignLayersToRootOperation, canMoveGroupInto, createLayerGroup as createLayerGroupOperation, reorderGroup as reorderGroupOperation, reorderLayers as reorderLayersOperation, ungroupSelected as ungroupSelectedOperation } from '@/core/layer-operations'
-import { SAVE_FORMAT_PREFERENCE_KEY, saveImageKindForPreference } from '@/core/file-preferences'
+import { assignGroupToGroup as assignGroupToGroupOperation, assignGroupToRoot as assignGroupToRootOperation, assignLayersAboveGroup as assignLayersAboveGroupOperation, assignLayersToGroup as assignLayersToGroupOperation, assignLayersToRoot as assignLayersToRootOperation, canMoveGroupInto, createLayerGroup as createLayerGroupOperation, moveGroupToRootEdge as moveGroupToRootEdgeOperation, moveLayersToRootEdge as moveLayersToRootEdgeOperation, positionGroupNextToLayer as positionGroupNextToLayerOperation, reorderGroup as reorderGroupOperation, reorderLayers as reorderLayersOperation, ungroupSelected as ungroupSelectedOperation } from '@/core/layer-operations'
+import { buildLayerPanelTree } from '@/core/layer-panel-layout'
+import { loadEditorPreferences, SAVE_FORMAT_PREFERENCE_KEY, saveImageKindForPreference } from '@/core/file-preferences'
+import { resolveClipboardPlacement } from '@/core/clipboard-placement'
 import { cloneProceduralSettings, defaultToolSettings, loadToolSettings, normalizePersistedBrushProfile, saveToolSettings, type BrushTool, type PersistedBrushProfile, type PersistedToolSettings } from '@/core/tool-preferences'
 import { readStoredString } from '@/core/storage'
 import { exportDocumentFile, openDocumentFile, saveDocumentFile, type ExportOptions, type SaveAsOptions } from './document-file-service'
 import { RecoveryService } from './recovery-service'
-import { ClipboardService, selectionClipboardImage } from './clipboard-service'
+import { ClipboardService, selectionClipboardImage, type LayerClipboard, type LayerCollectionClipboard } from './clipboard-service'
 import { captureAdjustmentSnapshot, captureLayerUi, commitLayerMerge, restoreAdjustmentSnapshot, restoreDocumentSnapshot } from './workspace-history'
 import { applyBrushProfile, brushProfileFromSession, clearSelectionBrushPaintColors, cloneSelectionMask, isBrushTool, persistToolSettings, remapSelectionBrushColors, rememberBrushProfile, sessionFromDocument, touch } from './workspace-session'
 import { addPaletteColor as addPaletteColorCommand, applyPalette as applyPaletteCommand, deletePaletteColors as deletePaletteColorsCommand, movePaletteColor as movePaletteColorCommand, reorderPaletteColors as reorderPaletteColorsCommand, selectPaletteColor as selectPaletteColorCommand } from './workspace-palette'
@@ -32,6 +34,8 @@ export type { AdjustmentSnapshot, AppDialog, CanvasResizePreview, DialogChoice,
 interface WorkspaceState {
   sessions: DocumentSession[]
   activeId: string | null
+  sharedPrimaryColor: RgbaColor
+  sharedSecondaryColor: RgbaColor
   message: string | null
   saveProgress: { title: string; value: number; label: string } | null
   dialog: AppDialog | null
@@ -54,13 +58,17 @@ interface WorkspaceState {
   setProceduralAntialias(enabled: boolean): void
   setProceduralAntialiasStrength(strength: number): void
   setShapeKind(kind: ShapeKind): void
+  setShapeRatio(ratio: ShapeRatio | null): void
   setFillMode(mode: FillMode): void
   setMoveAutoSelect(enabled: boolean): void
   setPrimaryColor(color: RgbaColor): void
   setSecondaryColor(color: RgbaColor): void
   swapPrimarySecondaryColors(): void
   setView(view: Partial<ViewState>): void
+  setViewportSize(size: { width: number; height: number }): void
   setSelection(selection: SelectionMask | null): void
+  invertSelection(): void
+  toggleSelectionOutline(): void
   beginLayerTransform(): void
   setSelectionKind(kind: SelectionKind): void
   commitSelectionChange(before: SelectionMask | null, after: SelectionMask | null, label: string): void
@@ -88,6 +96,7 @@ interface WorkspaceState {
   duplicateActiveLayer(): void
   duplicateLayers(layerIds: string[]): string[]
   deleteActiveLayer(): void
+  deleteSelectedLayers(): void
   mergeSelectedLayers(): void
   mergeActiveLayerDown(): void
   mergeSelectedGroup(): void
@@ -101,16 +110,20 @@ interface WorkspaceState {
   assignLayersToRoot(layerIds: string[], targetLayerId?: string, insertAfterTarget?: boolean): void
   assignLayersAboveGroup(layerIds: string[], groupId: string): void
   reorderGroup(groupId: string, targetGroupId: string, insertAfterTarget?: boolean): void
+  positionGroupNextToLayer(groupId: string, targetLayerId: string, insertAfterTarget?: boolean): void
   assignGroupToGroup(groupId: string, parentGroupId: string): void
   assignGroupToRoot(groupId: string): void
+  moveLayersToRootEdge(layerIds: string[], edge: 'top' | 'bottom'): void
+  moveGroupToRootEdge(groupId: string, edge: 'top' | 'bottom'): void
   createLayerGroup(): void
   ungroupSelected(): void
-  selectGroup(groupId: string): void
+  selectGroup(groupId: string, mode?: boolean | 'replace' | 'toggle' | 'range'): void
+  clearLayerSelection(): void
   toggleGroupCollapsed(groupId: string): void
   toggleGroupVisibility(groupId: string): void
   setGroupProperties(groupId: string, name: string, opacity: number, blendMode: BlendMode, locked: boolean, displayColor?: RgbaColor | null, description?: string): void
   toggleLayerVisibility(layerId: string): void
-  selectLayer(layerId: string, additive?: boolean): void
+  selectLayer(layerId: string, mode?: boolean | 'replace' | 'toggle' | 'range'): void
   renameLayer(layerId: string, name: string): void
   setLayerOpacity(layerId: string, opacity: number): void
   setLayerProperties(layerId: string, name: string, opacity: number): void
@@ -123,12 +136,17 @@ interface WorkspaceState {
   deleteSelection(): void
   fillForeground(): void
   setOutlinePreview(preview: OutlinePreview | null): void
-  outlineActiveSelection(color: RgbaColor, thickness: number, position: OutlinePosition, directions?: OutlineDirections, kernel?: OutlineKernel): boolean
+  outlineActiveSelection(color: RgbaColor, thickness: number, position: OutlinePosition, directions?: OutlineDirections, kernel?: OutlineKernel, previewEnabled?: boolean): boolean
   copySelection(): void
   copyActiveLayerToClipboard(): void
+  copySelectedLayersToClipboard(): void
   cutSelection(): void
   pasteSelection(): Promise<void>
+  pasteAsNewLayer(): Promise<boolean>
+  pasteAsNewDocument(): Promise<boolean>
   pasteLayerFromClipboard(): boolean
+  pasteLayersFromClipboard(): boolean
+  beginFloatingSelectionTransform(source: SelectionTransformSource, edit: PixelEdit, before: SelectionMask, target: SelectionMask, copy: boolean, label: string): void
   commitFloatingPaste(): void
   cancelFloatingPaste(): void
   updateFloatingPastePreview(edit: PixelEdit, target: SelectionMask): void
@@ -159,12 +177,108 @@ function activeSession(state: WorkspaceState): DocumentSession | null {
   return state.sessions.find((session) => session.document.id === state.activeId) ?? null
 }
 
+type LayerRowSelectionMode = boolean | 'replace' | 'toggle' | 'range'
+
+const selectedGroupRows = (session: DocumentSession): string[] =>
+  session.selectedGroupIds.length > 0 ? [...session.selectedGroupIds] : session.selectedGroupId ? [session.selectedGroupId] : []
+
+const selectedDirectLayerRows = (session: DocumentSession): string[] =>
+  session.selectedGroupId && selectedGroupRows(session).length === 1 ? [] : [...session.selectedLayerIds]
+
+const applyLayerRowSelection = (session: DocumentSession, layerIds: readonly string[], groupIds: readonly string[], focus: { kind: 'layer' | 'group'; id: string }): void => {
+  const selectedLayers = [...new Set(layerIds)].filter((id) => session.document.layers.some((layer) => layer.id === id))
+  const selectedGroups = [...new Set(groupIds)].filter((id) => session.document.groups.some((group) => group.id === id))
+  session.selectedGroupIds = selectedGroups
+  if (selectedGroups.length === 1 && selectedLayers.length === 0) {
+    session.selectedGroupId = selectedGroups[0]
+    session.selectedLayerIds = getLayerIdsInGroup(session.document, selectedGroups[0])
+  } else {
+    session.selectedGroupId = null
+    session.selectedLayerIds = selectedLayers
+  }
+  if (focus.kind === 'layer' && session.document.layers.some((layer) => layer.id === focus.id)) session.document.activeLayerId = focus.id
+  else if (focus.kind === 'group') {
+    const member = session.document.layers.find((layer) => getLayerIdsInGroup(session.document, focus.id).includes(layer.id))
+    if (member) session.document.activeLayerId = member.id
+  }
+}
+
+const applyLayerRowRange = (session: DocumentSession, target: { kind: 'layer' | 'group'; id: string }): void => {
+  const nodes = buildLayerPanelTree({
+    layers: session.document.layers,
+    groups: session.document.groups,
+    collapsedGroupIds: session.collapsedGroupIds
+  })
+  const visibleIds = nodes.map((node) => node.id)
+  const currentRows = [...selectedGroupRows(session), ...selectedDirectLayerRows(session)]
+  const anchorId = session.layerSelectionAnchorId && visibleIds.includes(session.layerSelectionAnchorId)
+    ? session.layerSelectionAnchorId
+    : currentRows.find((id) => visibleIds.includes(id)) ?? target.id
+  const anchorIndex = visibleIds.indexOf(anchorId)
+  const targetIndex = visibleIds.indexOf(target.id)
+  if (anchorIndex < 0 || targetIndex < 0) {
+    applyLayerRowSelection(session, target.kind === 'layer' ? [target.id] : [], target.kind === 'group' ? [target.id] : [], target)
+    return
+  }
+  const selectedNodes = nodes.slice(Math.min(anchorIndex, targetIndex), Math.max(anchorIndex, targetIndex) + 1)
+  applyLayerRowSelection(
+    session,
+    selectedNodes.filter((node) => node.kind === 'layer').map((node) => node.id),
+    selectedNodes.filter((node) => node.kind === 'group').map((node) => node.id),
+    target
+  )
+}
+
+const targetContainerTopIndex = (document: SpriteDocument, groupId: string | null): number => {
+  if (!groupId) return document.layers.length
+  const members = new Set(getLayerIdsInGroup(document, groupId))
+  return document.layers.reduce((last, layer, index) => members.has(layer.id) ? index + 1 : last, 0)
+}
+
+const lockedLayerStructure = (document: SpriteDocument, layerIds: readonly string[]): boolean =>
+  document.layers.some((layer) => layerIds.includes(layer.id) && isLayerEffectivelyLocked(document, layer))
+
+const lockedGroupStructure = (document: SpriteDocument, groupId: string): boolean => {
+  const groupIds = new Set([groupId, ...getDescendantGroupIds(document, groupId)])
+  return document.groups.some((group) => groupIds.has(group.id) && isGroupEffectivelyLocked(document, group))
+    || document.layers.some((layer) => Boolean(layer.groupId && groupIds.has(layer.groupId)) && isLayerEffectivelyLocked(document, layer))
+}
+
 const recoveryService = new RecoveryService()
 const clipboardService = new ClipboardService()
 
+function layerClipboardFromDocument(document: SpriteDocument, layer: RasterLayer, groupKey: string | null = null): LayerClipboard {
+  const pixels = new Uint8ClampedArray(layer.width * layer.height * 4)
+  for (let y = 0; y < layer.height; y += 1) for (let x = 0; x < layer.width; x += 1) {
+    const color = readLayerColorAt(document, layer, layer.offsetX + x, layer.offsetY + y)
+    const offset = (y * layer.width + x) * 4
+    pixels[offset] = color.r
+    pixels[offset + 1] = color.g
+    pixels[offset + 2] = color.b
+    pixels[offset + 3] = color.a
+  }
+  return {
+    name: layer.name,
+    width: layer.width,
+    height: layer.height,
+    offsetX: layer.offsetX,
+    offsetY: layer.offsetY,
+    visible: layer.visible,
+    locked: layer.locked,
+    opacity: layer.opacity,
+    blendMode: layer.blendMode,
+    displayColor: layer.displayColor ? { ...layer.displayColor } : undefined,
+    description: layer.description ?? '',
+    groupKey,
+    pixels
+  }
+}
+
 export const useWorkspace = create<WorkspaceState>((set, get) => ({
   sessions: [],
   activeId: null,
+  sharedPrimaryColor: { r: 41, g: 121, b: 255, a: 255 },
+  sharedSecondaryColor: { r: 241, g: 244, b: 248, a: 255 },
   message: null,
   saveProgress: null,
   dialog: null,
@@ -255,6 +369,8 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     const existing = get().sessions.find((session) => session.document.id === document.id)
     if (existing) return
     const session = sessionFromDocument(document)
+    session.primaryColor = { ...get().sharedPrimaryColor }
+    session.secondaryColor = { ...get().sharedSecondaryColor }
     set((state) => ({ sessions: [...state.sessions, session], activeId: document.id, message: null }))
   },
 
@@ -344,6 +460,15 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   setProceduralAntialias(enabled) { get().mutateActive((session) => { session.proceduralAntialias = enabled; rememberBrushProfile(session); persistToolSettings(session) }, false) },
   setProceduralAntialiasStrength(strength) { get().mutateActive((session) => { session.proceduralAntialiasStrength = Math.max(1, Math.min(100, Math.round(strength))); rememberBrushProfile(session); persistToolSettings(session) }, false) },
   setShapeKind(kind) { get().mutateActive((session) => { session.shapeKind = kind; persistToolSettings(session) }, false) },
+  setShapeRatio(ratio) {
+    get().mutateActive((session) => {
+      session.shapeRatio = ratio === null ? null : {
+        width: Math.round(Math.max(0.1, Math.min(100, ratio.width)) * 10) / 10,
+        height: Math.round(Math.max(0.1, Math.min(100, ratio.height)) * 10) / 10
+      }
+      persistToolSettings(session)
+    }, false)
+  },
   setFillMode(mode) {
     get().mutateActive((session) => {
       session.fillMode = mode === 'contiguous' && session.fillMode === 'contiguous' ? 'global' : mode
@@ -352,28 +477,57 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
   setMoveAutoSelect(enabled) { get().mutateActive((session) => { session.moveAutoSelect = enabled; persistToolSettings(session) }, false) },
   setPrimaryColor(color) {
-    get().mutateActive((session) => {
+    const state = get()
+    for (const session of state.sessions) {
       session.primaryColor = { ...color }
       if (session.brushImage?.intrinsicSize) session.brushImage = remapSelectionBrushColors(session.brushImage, session.primaryColor, session.secondaryColor)
       const matching = session.document.palette.find((entry) => session.document.paletteOrder.includes(entry.id) && colorEquals(entry.color, color))
       session.paletteSelectionId = matching?.id ?? null
       session.selectedPaletteIds = matching ? [matching.id] : []
-    }, false)
+    }
+    set({ sharedPrimaryColor: { ...color }, sessions: [...state.sessions] })
+  },
+  setSecondaryColor(color) {
+    const state = get()
+    for (const session of state.sessions) {
+      session.secondaryColor = { ...color }
+      if (session.brushImage?.intrinsicSize) session.brushImage = remapSelectionBrushColors(session.brushImage, session.primaryColor, session.secondaryColor)
+    }
+    set({ sharedSecondaryColor: { ...color }, sessions: [...state.sessions] })
   },
-  setSecondaryColor(color) { get().mutateActive((session) => { session.secondaryColor = { ...color }; if (session.brushImage?.intrinsicSize) session.brushImage = remapSelectionBrushColors(session.brushImage, session.primaryColor, session.secondaryColor) }, false) },
   swapPrimarySecondaryColors() {
-    get().mutateActive((session) => {
-      const primary = session.primaryColor
-      session.primaryColor = { ...session.secondaryColor }
+    const state = get()
+    const primary = { ...state.sharedPrimaryColor }
+    const secondary = { ...state.sharedSecondaryColor }
+    for (const session of state.sessions) {
+      session.primaryColor = { ...secondary }
       session.secondaryColor = { ...primary }
       if (session.brushImage?.intrinsicSize) session.brushImage = remapSelectionBrushColors(session.brushImage, session.primaryColor, session.secondaryColor)
       const matching = session.document.palette.find((entry) => session.document.paletteOrder.includes(entry.id) && colorEquals(entry.color, session.primaryColor))
       session.paletteSelectionId = matching?.id ?? null
       session.selectedPaletteIds = matching ? [matching.id] : []
-    }, false)
+    }
+    set({ sharedPrimaryColor: secondary, sharedSecondaryColor: primary, sessions: [...state.sessions] })
   },
   setView(view) { get().mutateActive((session) => { Object.assign(session.view, view) }, false) },
+  setViewportSize(size) {
+    get().mutateActive((session) => {
+      session.viewportSize = { width: Math.max(0, size.width), height: Math.max(0, size.height) }
+    }, false)
+  },
   setSelection(selection) { get().mutateActive((session) => { session.selection = selection ? { ...selection, mask: selection.mask?.slice() } : null }, false) },
+  invertSelection() {
+    const session = activeSession(get())
+    if (!session?.selection) { set({ message: '请先创建选区。' }); return }
+    const before = cloneSelectionMask(session.selection)
+    const after = invertSelectionMask(session.selection, session.document.width, session.document.height)
+    get().commitSelectionChange(before, after, '反选选区')
+  },
+  toggleSelectionOutline() {
+    get().mutateActive((session) => {
+      session.view.showSelectionOutline = session.view.showSelectionOutline === false
+    }, false)
+  },
   beginLayerTransform() {
     get().commitFloatingPaste()
     const session = activeSession(get())
@@ -409,6 +563,7 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     get().mutateActive((active) => {
       active.document.activeLayerId = layer.id
       active.selectedGroupId = null
+      active.selectedGroupIds = []
       active.selectedLayerIds = [layer.id]
       active.selection = visibleBounds
       active.selectionKind = 'rectangle'
@@ -445,6 +600,8 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   toggleGrid() { get().mutateActive((session) => { session.view.showGrid = !session.view.showGrid }, false) },
   selectPaletteColor(id, additive = false) {
     get().mutateActive((session) => selectPaletteColorCommand(session, id, additive), false)
+    const session = activeSession(get())
+    if (session && session.paletteSelectionId !== null) get().setPrimaryColor(session.primaryColor)
   },
   addPaletteColor() {
     get().mutateActive(addPaletteColorCommand)
@@ -523,14 +680,18 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     get().mutateActive((session) => {
       const document = session.document
       const layer = createLayer(`图层 ${document.layers.length + 1}`, document.width, document.height, document.colorMode)
-      const targetGroupId = session.selectedGroupId
+      const selectedLayer = session.selectedGroupId
+        ? null
+        : document.layers.find((candidate) => candidate.id === document.activeLayerId && session.selectedLayerIds.includes(candidate.id))
+      const targetGroupId = session.selectedGroupId ?? selectedLayer?.groupId ?? null
       if (targetGroupId) layer.groupId = targetGroupId
       const groupMemberIds = targetGroupId ? new Set(getLayerIdsInGroup(document, targetGroupId)) : null
       const lastGroupMember = groupMemberIds ? document.layers.reduce((last, item, index) => groupMemberIds.has(item.id) ? index : last, -1) : -1
-      const index = lastGroupMember >= 0 ? lastGroupMember + 1 : document.layers.findIndex((item) => item.id === document.activeLayerId) + 1
+      const index = lastGroupMember >= 0 ? lastGroupMember + 1 : document.layers.length
       document.layers.splice(index, 0, layer)
       document.activeLayerId = layer.id
       session.selectedGroupId = null
+      session.selectedGroupIds = []
       session.selectedLayerIds = [layer.id]
       session.history.push({
         label: '新建图层', bytes: layer.pixels.byteLength,
@@ -546,6 +707,7 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
       const priorId = document.activeLayerId
       const copy = duplicateLayer(document, priorId)
       session.selectedGroupId = null
+      session.selectedGroupIds = []
       session.selectedLayerIds = [copy.id]
       const index = document.layers.findIndex((item) => item.id === copy.id)
       session.history.push({
@@ -571,6 +733,7 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
       const placements = copies.map((copy) => ({ copy, index: document.layers.indexOf(copy) }))
       document.activeLayerId = copies.at(-1)!.id
       session.selectedGroupId = null
+      session.selectedGroupIds = []
       session.selectedLayerIds = [...createdIds]
       session.history.push({
         label: '复制图层',
@@ -581,12 +744,14 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
           document.activeLayerId = priorActiveId
           session.selectedLayerIds = priorSelection
           session.selectedGroupId = null
+          session.selectedGroupIds = []
         },
         redo: () => {
           for (const { copy, index } of placements) if (!document.layers.some((layer) => layer.id === copy.id)) document.layers.splice(Math.min(index, document.layers.length), 0, copy)
           document.activeLayerId = copies.at(-1)!.id
           session.selectedLayerIds = [...createdIds]
           session.selectedGroupId = null
+          session.selectedGroupIds = []
         }
       })
     })
@@ -594,15 +759,21 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   deleteActiveLayer() {
+    if ((activeSession(get())?.selectedLayerIds.length ?? 0) > 1) {
+      get().deleteSelectedLayers()
+      return
+    }
     get().mutateActive((session) => {
       const document = session.document
       if (document.layers.length === 1) { set({ message: '至少保留一个图层。' }); return }
       const index = document.layers.findIndex((item) => item.id === document.activeLayerId)
       const removed = document.layers[index]
+      if (!removed || isLayerEffectivelyLocked(document, removed)) { set({ message: '锁定的图层无法删除。' }); return }
       document.layers.splice(index, 1)
       const nextId = document.layers[Math.max(0, index - 1)].id
       document.activeLayerId = nextId
       session.selectedGroupId = null
+      session.selectedGroupIds = []
       session.selectedLayerIds = [nextId]
       session.history.push({
         label: '删除图层', bytes: removed.pixels.byteLength,
@@ -612,6 +783,60 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     })
   },
 
+  deleteSelectedLayers() {
+    const current = activeSession(get())
+    if (!current) return
+    const selectedGroupIdSet = new Set<string>()
+    for (const groupId of selectedGroupRows(current)) {
+      selectedGroupIdSet.add(groupId)
+      for (const descendantId of getDescendantGroupIds(current.document, groupId)) selectedGroupIdSet.add(descendantId)
+    }
+    const selectedIds = new Set(selectedDirectLayerRows(current))
+    for (const groupId of selectedGroupIdSet) for (const layerId of getLayerIdsInGroup(current.document, groupId)) selectedIds.add(layerId)
+    const removedGroups = current.document.groups.map((group, index) => ({ group, index })).filter(({ group }) => selectedGroupIdSet.has(group.id))
+    const removed = current.document.layers.map((layer, index) => ({ layer, index })).filter(({ layer }) => selectedIds.has(layer.id))
+    if (removed.length === 0 && removedGroups.length === 0) return
+    const locked = removed.some(({ layer }) => isLayerEffectivelyLocked(current.document, layer))
+      || removedGroups.some(({ group }) => isGroupEffectivelyLocked(current.document, group))
+    if (locked) { set({ message: '锁定的图层或图层组无法删除。' }); return }
+    if (removed.length >= current.document.layers.length) { set({ message: '至少保留一个图层。' }); return }
+    get().mutateActive((session) => {
+      const document = session.document
+      const previousActiveId = document.activeLayerId
+      const previousSelection = [...session.selectedLayerIds]
+      const previousGroupId = session.selectedGroupId
+      const previousGroupIds = [...session.selectedGroupIds]
+      document.layers = document.layers.filter((layer) => !selectedIds.has(layer.id))
+      if (removedGroups.length > 0) document.groups = document.groups.filter((group) => !selectedGroupIdSet.has(group.id))
+      const nearestIndex = removed.length > 0 ? Math.max(0, Math.min(document.layers.length - 1, removed[0].index - 1)) : document.layers.findIndex((layer) => layer.id === previousActiveId)
+      const nextId = document.layers[Math.max(0, nearestIndex)]?.id ?? previousActiveId
+      document.activeLayerId = nextId
+      session.selectedGroupId = null
+      session.selectedGroupIds = []
+      session.selectedLayerIds = [nextId]
+      session.history.push({
+        label: removedGroups.length > 0 ? '删除图层组' : removed.length === 1 ? '删除图层' : '删除所选图层',
+        bytes: removed.reduce((sum, item) => sum + item.layer.pixels.byteLength, 0) + removedGroups.length * 96,
+        undo: () => {
+          for (const item of removedGroups) if (!document.groups.some((group) => group.id === item.group.id)) document.groups.splice(Math.min(item.index, document.groups.length), 0, item.group)
+          for (const item of removed) if (!document.layers.some((layer) => layer.id === item.layer.id)) document.layers.splice(Math.min(item.index, document.layers.length), 0, item.layer)
+          document.activeLayerId = previousActiveId
+          session.selectedLayerIds = previousSelection
+          session.selectedGroupId = previousGroupId
+          session.selectedGroupIds = previousGroupIds
+        },
+        redo: () => {
+          document.layers = document.layers.filter((layer) => !selectedIds.has(layer.id))
+          document.groups = document.groups.filter((group) => !selectedGroupIdSet.has(group.id))
+          document.activeLayerId = nextId
+          session.selectedLayerIds = [nextId]
+          session.selectedGroupId = null
+          session.selectedGroupIds = []
+        }
+      })
+    })
+  },
+
   mergeSelectedLayers() {
     get().commitFloatingPaste()
     const state = get()
@@ -701,6 +926,8 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   reorderLayers(layerIds, targetLayerId, insertAfterTarget = true) {
+    const current = activeSession(get())
+    if (current && lockedLayerStructure(current.document, layerIds)) { set({ message: '锁定的图层无法移动。' }); return }
     get().mutateActive((session) => {
       const history = reorderLayersOperation(session, layerIds, targetLayerId, insertAfterTarget)
       if (history) session.history.push(history)
@@ -712,6 +939,8 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   assignLayersToGroup(layerIds, groupId, targetLayerId, insertAfterTarget = true) {
+    const current = activeSession(get())
+    if (current && lockedLayerStructure(current.document, layerIds)) { set({ message: '锁定的图层无法移动。' }); return }
     get().mutateActive((session) => {
       const history = assignLayersToGroupOperation(session, layerIds, groupId, targetLayerId, insertAfterTarget)
       if (history) session.history.push(history)
@@ -719,6 +948,8 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   assignLayersToRoot(layerIds, targetLayerId, insertAfterTarget = true) {
+    const current = activeSession(get())
+    if (current && lockedLayerStructure(current.document, layerIds)) { set({ message: '锁定的图层无法移动。' }); return }
     get().mutateActive((session) => {
       const history = assignLayersToRootOperation(session, layerIds, targetLayerId, insertAfterTarget)
       if (history) session.history.push(history)
@@ -726,6 +957,8 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   assignLayersAboveGroup(layerIds, groupId) {
+    const current = activeSession(get())
+    if (current && lockedLayerStructure(current.document, layerIds)) { set({ message: '锁定的图层无法移动。' }); return }
     get().mutateActive((session) => {
       const history = assignLayersAboveGroupOperation(session, layerIds, groupId)
       if (history) session.history.push(history)
@@ -734,6 +967,8 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
 
   reorderGroup(groupId, targetGroupId, insertAfterTarget = true) {
     if (groupId === targetGroupId) return
+    const current = activeSession(get())
+    if (current && lockedGroupStructure(current.document, groupId)) { set({ message: '锁定的图层组无法移动。' }); return }
     get().mutateActive((session) => {
       if (!canMoveGroupInto(session.document, groupId, targetGroupId)) {
         set({ message: '不能把图层组移动到自己的子组旁。' })
@@ -744,8 +979,19 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     })
   },
 
+  positionGroupNextToLayer(groupId, targetLayerId, insertAfterTarget = true) {
+    const current = activeSession(get())
+    if (current && lockedGroupStructure(current.document, groupId)) { set({ message: '锁定的图层组无法移动。' }); return }
+    get().mutateActive((session) => {
+      const history = positionGroupNextToLayerOperation(session, groupId, targetLayerId, insertAfterTarget)
+      if (history) session.history.push(history)
+    })
+  },
+
   assignGroupToGroup(groupId, parentGroupId) {
     if (groupId === parentGroupId) return
+    const current = activeSession(get())
+    if (current && lockedGroupStructure(current.document, groupId)) { set({ message: '锁定的图层组无法移动。' }); return }
     get().mutateActive((session) => {
       if (!canMoveGroupInto(session.document, groupId, parentGroupId)) { set({ message: '不能把图层组移动到自己的子组中。' }); return }
       const history = assignGroupToGroupOperation(session, groupId, parentGroupId)
@@ -754,12 +1000,32 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   assignGroupToRoot(groupId) {
+    const current = activeSession(get())
+    if (current && lockedGroupStructure(current.document, groupId)) { set({ message: '锁定的图层组无法移动。' }); return }
     get().mutateActive((session) => {
       const history = assignGroupToRootOperation(session, groupId)
       if (history) session.history.push(history)
     })
   },
 
+  moveLayersToRootEdge(layerIds, edge) {
+    const current = activeSession(get())
+    if (current && lockedLayerStructure(current.document, layerIds)) { set({ message: '锁定的图层无法移动。' }); return }
+    get().mutateActive((session) => {
+      const history = moveLayersToRootEdgeOperation(session, layerIds, edge)
+      if (history) session.history.push(history)
+    })
+  },
+
+  moveGroupToRootEdge(groupId, edge) {
+    const current = activeSession(get())
+    if (current && lockedGroupStructure(current.document, groupId)) { set({ message: '锁定的图层组无法移动。' }); return }
+    get().mutateActive((session) => {
+      const history = moveGroupToRootEdgeOperation(session, groupId, edge)
+      if (history) session.history.push(history)
+    })
+  },
+
   createLayerGroup() {
     get().mutateActive((session) => {
       const history = createLayerGroupOperation(session, createId('group'), `组 ${session.document.groups.length + 1}`)
@@ -768,6 +1034,9 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   ungroupSelected() {
+    const current = activeSession(get())
+    const groupIds = current?.selectedGroupId ? [current.selectedGroupId] : current?.document.layers.filter((layer) => current.selectedLayerIds.includes(layer.id) && layer.groupId).map((layer) => layer.groupId!) ?? []
+    if (current && groupIds.some((groupId) => lockedGroupStructure(current.document, groupId))) { set({ message: '锁定的图层组无法解组。' }); return }
     get().mutateActive((session) => {
       const history = ungroupSelectedOperation(session)
       if (history) session.history.push(history)
@@ -783,25 +1052,49 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     })
   },
 
-  selectLayer(layerId, additive = false) {
+  selectLayer(layerId, mode = 'replace') {
     get().commitFloatingPaste()
     get().mutateActive((session) => {
-      session.selectedGroupId = null
-      if (!additive) session.selectedLayerIds = [layerId]
-      else if (session.selectedLayerIds.includes(layerId)) session.selectedLayerIds = session.selectedLayerIds.length > 1 ? session.selectedLayerIds.filter((id) => id !== layerId) : session.selectedLayerIds
-      else session.selectedLayerIds = [...session.selectedLayerIds, layerId]
-      session.document.activeLayerId = session.selectedLayerIds.includes(layerId) ? layerId : session.selectedLayerIds.at(-1) ?? layerId
+      const selectionMode: Exclude<LayerRowSelectionMode, boolean> = mode === true ? 'toggle' : mode === false ? 'replace' : mode
+      if (selectionMode === 'range') {
+        applyLayerRowRange(session, { kind: 'layer', id: layerId })
+      } else if (selectionMode === 'toggle') {
+        const layers = selectedDirectLayerRows(session)
+        const nextLayers = layers.includes(layerId) ? layers.filter((id) => id !== layerId) : [...layers, layerId]
+        applyLayerRowSelection(session, nextLayers, selectedGroupRows(session), { kind: 'layer', id: layerId })
+        session.layerSelectionAnchorId = layerId
+      } else {
+        applyLayerRowSelection(session, [layerId], [], { kind: 'layer', id: layerId })
+        session.layerSelectionAnchorId = layerId
+      }
     }, false)
   },
 
-  selectGroup(groupId) {
+  selectGroup(groupId, mode = 'replace') {
     get().commitFloatingPaste()
     get().mutateActive((session) => {
       getGroup(session.document, groupId)
-      session.selectedGroupId = groupId
-      session.selectedLayerIds = getLayerIdsInGroup(session.document, groupId)
-      const member = session.document.layers.find((layer) => session.selectedLayerIds.includes(layer.id))
-      if (member) session.document.activeLayerId = member.id
+      const selectionMode: Exclude<LayerRowSelectionMode, boolean> = mode === true ? 'toggle' : mode === false ? 'replace' : mode
+      if (selectionMode === 'range') applyLayerRowRange(session, { kind: 'group', id: groupId })
+      else if (selectionMode === 'toggle') {
+        const groups = selectedGroupRows(session)
+        const nextGroups = groups.includes(groupId) ? groups.filter((id) => id !== groupId) : [...groups, groupId]
+        applyLayerRowSelection(session, selectedDirectLayerRows(session), nextGroups, { kind: 'group', id: groupId })
+        session.layerSelectionAnchorId = groupId
+      } else {
+        applyLayerRowSelection(session, [], [groupId], { kind: 'group', id: groupId })
+        session.layerSelectionAnchorId = groupId
+      }
+    }, false)
+  },
+
+  clearLayerSelection() {
+    get().commitFloatingPaste()
+    get().mutateActive((session) => {
+      session.selectedGroupId = null
+      session.selectedGroupIds = []
+      session.selectedLayerIds = []
+      session.layerSelectionAnchorId = null
     }, false)
   },
 
@@ -828,8 +1121,14 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     if (!trimmed) return
     get().mutateActive((session) => {
       const group = getGroup(session.document, groupId)
+      const lockingAncestor = getGroupLockingAncestor(session.document, group)
+      if (!locked && lockingAncestor) {
+        set({ message: '父级图层组已锁定，无法解锁。' })
+        return
+      }
       const before = { name: group.name, opacity: group.opacity, blendMode: group.blendMode, locked: group.locked, displayColor: group.displayColor, description: group.description ?? '' }
-      const after = { name: trimmed, opacity: Math.max(0, Math.min(1, opacity)), blendMode, locked, displayColor: displayColor === undefined ? group.displayColor : displayColor ?? undefined, description: description ?? group.description ?? '' }
+      const visualLocked = group.locked || Boolean(lockingAncestor)
+      const after = { name: trimmed, opacity: visualLocked ? group.opacity : Math.max(0, Math.min(1, opacity)), blendMode: visualLocked ? group.blendMode : blendMode, locked: lockingAncestor ? group.locked : locked, displayColor: displayColor === undefined ? group.displayColor : displayColor ?? undefined, description: description ?? group.description ?? '' }
       Object.assign(group, after)
       session.history.push({ label: '修改图层组属性', bytes: 48 + before.name.length + after.name.length, undo: () => Object.assign(group, before), redo: () => Object.assign(group, after) })
     })
@@ -847,10 +1146,15 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   setLayerOpacity(layerId, opacity) {
+    const current = activeSession(get())
+    if (!current) return
+    const currentLayer = getLayer(current.document, layerId)
+    if (isLayerEffectivelyLocked(current.document, currentLayer)) return
+    const after = Math.max(0, Math.min(1, opacity))
+    if (currentLayer.opacity === after) return
     get().mutateActive((session) => {
       const layer = getLayer(session.document, layerId)
       const before = layer.opacity
-      const after = Math.max(0, Math.min(1, opacity))
       layer.opacity = after
       session.history.push({ label: '图层不透明度', bytes: 16, undo: () => { layer.opacity = before }, redo: () => { layer.opacity = after } })
     })
@@ -859,10 +1163,15 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   setLayerProperties(layerId, name, opacity) {
     const trimmed = name.trim()
     if (!trimmed) return
+    const current = activeSession(get())
+    if (!current) return
+    const currentLayer = getLayer(current.document, layerId)
+    const nextOpacity = isLayerEffectivelyLocked(current.document, currentLayer) ? currentLayer.opacity : Math.max(0, Math.min(1, opacity))
+    if (currentLayer.name === trimmed && currentLayer.opacity === nextOpacity) return
     get().mutateActive((session) => {
       const layer = getLayer(session.document, layerId)
       const before = { name: layer.name, opacity: layer.opacity }
-      const after = { name: trimmed, opacity: Math.max(0, Math.min(1, opacity)) }
+      const after = { name: trimmed, opacity: nextOpacity }
       layer.name = after.name
       layer.opacity = after.opacity
       session.history.push({ label: '修改图层属性', bytes: 32 + before.name.length + after.name.length, undo: () => { layer.name = before.name; layer.opacity = before.opacity }, redo: () => { layer.name = after.name; layer.opacity = after.opacity } })
@@ -874,22 +1183,35 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     if (!trimmed) return
     get().mutateActive((session) => {
       const layer = getLayer(session.document, layerId)
+      const lockingGroup = getLayerLockingGroup(session.document, layer)
+      if (locked === false && lockingGroup) {
+        set({ message: '父级图层组已锁定，无法解锁。' })
+        return
+      }
       const before = { name: layer.name, opacity: layer.opacity, blendMode: layer.blendMode, locked: layer.locked, displayColor: layer.displayColor, description: layer.description ?? '' }
-      const after = { name: trimmed, opacity: Math.max(0, Math.min(1, opacity)), blendMode, locked: locked ?? layer.locked, displayColor: displayColor === undefined ? layer.displayColor : displayColor ?? undefined, description: description ?? layer.description ?? '' }
+      const visualLocked = layer.locked || Boolean(lockingGroup)
+      const after = { name: trimmed, opacity: visualLocked ? layer.opacity : Math.max(0, Math.min(1, opacity)), blendMode: visualLocked ? layer.blendMode : blendMode, locked: lockingGroup ? layer.locked : locked ?? layer.locked, displayColor: displayColor === undefined ? layer.displayColor : displayColor ?? undefined, description: description ?? layer.description ?? '' }
       Object.assign(layer, after)
       session.history.push({ label: '修改图层属性', bytes: 40 + before.name.length + after.name.length, undo: () => Object.assign(layer, before), redo: () => Object.assign(layer, after) })
     })
   },
   applyActiveLayerAdjustment(adjustment) {
     get().mutateActive((session) => {
-      const layer = getActiveLayer(session.document)
-      if (isLayerEffectivelyLocked(session.document, layer)) return
-      const edit = applyColorAdjustment(session.document, layer, adjustment, session.selection)
       const labels: Record<ColorAdjustment['kind'], string> = {
         'color-balance': '色彩平衡', 'brightness-contrast': '亮度/对比度', 'hue-saturation': '色相/饱和度', curves: '曲线'
       }
-      const entry = commitPixelEdit(session.document, edit, labels[adjustment.kind])
-      if (entry) session.history.push(entry)
+      const targetIds = session.selection
+        ? [getActiveLayer(session.document).id]
+        : [...new Set(session.selectedLayerIds.length > 0 ? session.selectedLayerIds : [session.document.activeLayerId])]
+      session.history.beginCompound()
+      for (const layerId of targetIds) {
+        const layer = session.document.layers.find((candidate) => candidate.id === layerId)
+        if (!layer || isLayerEffectivelyLocked(session.document, layer)) continue
+        const edit = applyColorAdjustment(session.document, layer, adjustment, session.selection)
+        const entry = commitPixelEdit(session.document, edit, labels[adjustment.kind])
+        if (entry) session.history.push(entry)
+      }
+      session.history.endCompound(labels[adjustment.kind])
     })
   },
   captureActiveLayerAdjustmentSnapshot() {
@@ -899,8 +1221,10 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   previewActiveLayerAdjustment(adjustment, baseline) {
     get().mutateActive((session) => {
       restoreAdjustmentSnapshot(session, baseline)
-      const layer = getLayer(session.document, baseline.layerId)
-      if (!isLayerEffectivelyLocked(session.document, layer)) applyColorAdjustment(session.document, layer, adjustment, session.selection)
+      for (const layerSnapshot of baseline.layers) {
+        const layer = session.document.layers.find((candidate) => candidate.id === layerSnapshot.layerId)
+        if (layer && !isLayerEffectivelyLocked(session.document, layer)) applyColorAdjustment(session.document, layer, adjustment, session.selection)
+      }
       session.revision += 1
     }, false)
   },
@@ -914,20 +1238,21 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     get().mutateActive((session) => {
       const before = {
         ...baseline,
-        pixels: baseline.pixels instanceof Uint8ClampedArray ? new Uint8ClampedArray(baseline.pixels) : new Uint32Array(baseline.pixels),
+        layers: baseline.layers.map((layer) => ({ ...layer, pixels: layer.pixels instanceof Uint8ClampedArray ? new Uint8ClampedArray(layer.pixels) : new Uint32Array(layer.pixels) })),
         palette: baseline.palette.map((entry) => ({ ...entry, color: { ...entry.color } }))
       }
       restoreAdjustmentSnapshot(session, before)
-      const layer = getLayer(session.document, before.layerId)
-      if (isLayerEffectivelyLocked(session.document, layer)) return
-      applyColorAdjustment(session.document, layer, adjustment, session.selection)
-      const after = captureAdjustmentSnapshot(session)
+      for (const layerSnapshot of before.layers) {
+        const layer = session.document.layers.find((candidate) => candidate.id === layerSnapshot.layerId)
+        if (layer && !isLayerEffectivelyLocked(session.document, layer)) applyColorAdjustment(session.document, layer, adjustment, session.selection)
+      }
+      const after = captureAdjustmentSnapshot(session, before.layers.map((layer) => layer.layerId))
       const labels: Record<ColorAdjustment['kind'], string> = {
         'color-balance': '色彩平衡', 'brightness-contrast': '亮度/对比度', 'hue-saturation': '色相/饱和度', curves: '曲线'
       }
       session.history.push({
         label: labels[adjustment.kind],
-        bytes: before.pixels.byteLength + after.pixels.byteLength + (before.palette.length + after.palette.length) * 24,
+        bytes: before.layers.reduce((bytes, layer) => bytes + layer.pixels.byteLength, 0) + after.layers.reduce((bytes, layer) => bytes + layer.pixels.byteLength, 0) + (before.palette.length + after.palette.length) * 24,
         undo: () => { restoreAdjustmentSnapshot(session, before); session.revision += 1 },
         redo: () => { restoreAdjustmentSnapshot(session, after); session.revision += 1 }
       })
@@ -959,7 +1284,7 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     get().commitPixelEdit(edit, session.selection ? '填充选区前景色' : '填充画布前景色')
   },
 
-  outlineActiveSelection(color, thickness, position, directions, kernel = 'round') {
+  outlineActiveSelection(color, thickness, position, directions, kernel = 'round', previewEnabled = true) {
     const session = activeSession(get())
     if (!session?.selection) { set({ message: '请先创建选区。' }); return false }
     const layer = getActiveLayer(session.document)
@@ -967,6 +1292,14 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     try {
       const edit = outlineSelection(session.document, layer, session.selection, color, thickness, position, directions, kernel)
       if (!edit) { set({ message: '选区内没有可描边的内容。' }); return false }
+      session.document.outlineSettings = {
+        color: { ...color },
+        thickness: Math.max(1, Math.min(64, Math.round(thickness))),
+        position,
+        kernel,
+        directions: directions ? { ...directions } : { nw: false, n: true, ne: false, w: true, e: true, sw: false, s: true, se: false },
+        previewEnabled
+      }
       get().commitPixelEdit(edit, position === 'inside' ? '内部描边' : '外部描边')
       set({ message: `已应用 ${Math.max(1, Math.min(64, Math.round(thickness)))} px ${position === 'inside' ? '内部' : '外部'}描边。` })
       return true
@@ -977,60 +1310,132 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
   },
 
   copyActiveLayerToClipboard() {
+    get().copySelectedLayersToClipboard()
+  },
+
+  copySelectedLayersToClipboard() {
     get().commitFloatingPaste()
     const session = activeSession(get())
-    if (!session || session.selectedGroupId || session.selectedLayerIds.length !== 1) {
-      set({ message: '请选择一个图层后再复制图层。' })
+    if (!session) return
+    const document = session.document
+    const selectedGroupIdSet = new Set<string>()
+    for (const groupId of selectedGroupRows(session)) {
+      selectedGroupIdSet.add(groupId)
+      for (const descendantId of getDescendantGroupIds(document, groupId)) selectedGroupIdSet.add(descendantId)
+    }
+    const selectedLayerIdSet = new Set(selectedDirectLayerRows(session))
+    for (const groupId of selectedGroupIdSet) for (const layerId of getLayerIdsInGroup(document, groupId)) selectedLayerIdSet.add(layerId)
+    const layers = document.layers.filter((layer) => selectedLayerIdSet.has(layer.id))
+    if (layers.length === 0) {
+      set({ message: '请先选择要复制的图层或图层组。' })
       return
     }
-    const layer = session.document.layers.find((candidate) => candidate.id === session.selectedLayerIds[0])
-    if (!layer) return
-    const pixels = new Uint8ClampedArray(layer.width * layer.height * 4)
-    for (let y = 0; y < layer.height; y += 1) for (let x = 0; x < layer.width; x += 1) {
-      const color = readLayerColorAt(session.document, layer, layer.offsetX + x, layer.offsetY + y)
-      const offset = (y * layer.width + x) * 4
-      pixels[offset] = color.r
-      pixels[offset + 1] = color.g
-      pixels[offset + 2] = color.b
-      pixels[offset + 3] = color.a
+    const clipboard: LayerCollectionClipboard = {
+      sourceDocumentId: document.id,
+      layers: layers.map((layer) => layerClipboardFromDocument(document, layer, layer.groupId && selectedGroupIdSet.has(layer.groupId) ? layer.groupId : null)),
+      groups: document.groups.filter((group) => selectedGroupIdSet.has(group.id)).map((group) => ({
+        key: group.id,
+        name: group.name,
+        visible: group.visible,
+        locked: group.locked,
+        opacity: group.opacity,
+        blendMode: group.blendMode,
+        displayColor: group.displayColor ? { ...group.displayColor } : undefined,
+        description: group.description ?? '',
+        parentKey: group.parentGroupId ?? null
+      }))
     }
-    clipboardService.setLayer({ name: layer.name, width: layer.width, height: layer.height, offsetX: layer.offsetX, offsetY: layer.offsetY, visible: layer.visible, locked: layer.locked, opacity: layer.opacity, blendMode: layer.blendMode, pixels })
-    set({ message: `已复制图层“${layer.name}”。` })
+    clipboardService.setLayers(clipboard)
+    set({ message: clipboard.groups.length > 0 ? `已复制图层组“${clipboard.groups[0].name}”，共 ${layers.length} 个图层。` : layers.length === 1 ? `已复制图层“${layers[0].name}”。` : `已复制 ${layers.length} 个图层。` })
   },
 
   pasteLayerFromClipboard() {
-    const clipboard = clipboardService.getLayer()
+    return get().pasteLayersFromClipboard()
+  },
+
+  pasteLayersFromClipboard() {
+    const clipboard = clipboardService.getLayers()
     const current = activeSession(get())
-    if (!clipboard || !current) return false
+    if (!clipboard || clipboard.layers.length === 0 || !current) return false
     get().mutateActive((session) => {
       const document = session.document
-      const layer = createLayer(`${clipboard.name} 副本`, clipboard.width, clipboard.height, document.colorMode)
-      layer.offsetX = clipboard.offsetX
-      layer.offsetY = clipboard.offsetY
-      layer.visible = clipboard.visible
-      layer.locked = clipboard.locked
-      layer.opacity = clipboard.opacity
-      layer.blendMode = clipboard.blendMode
-      if (layer.format === 'rgba') layer.pixels.set(clipboard.pixels)
-      else for (let index = 0; index < clipboard.width * clipboard.height; index += 1) {
-        const offset = index * 4
-        layer.pixels[index] = findOrAddPaletteColor(document, { r: clipboard.pixels[offset], g: clipboard.pixels[offset + 1], b: clipboard.pixels[offset + 2], a: clipboard.pixels[offset + 3] })
+      const selectedGroup = session.selectedGroupId ? document.groups.find((group) => group.id === session.selectedGroupId) : null
+      const selectedLayer = session.selectedGroupId ? null : document.layers.find((layer) => layer.id === document.activeLayerId && session.selectedLayerIds.includes(layer.id))
+      const targetGroupId = clipboard.groups.length > 0
+        ? selectedGroup?.parentGroupId ?? selectedLayer?.groupId ?? null
+        : selectedGroup?.id ?? selectedLayer?.groupId ?? null
+      const groupIdByKey = new Map(clipboard.groups.map((group) => [group.key, createId('group')]))
+      const resolveGroupParent = (parentKey?: string | null): string | null => {
+        if (!parentKey) return targetGroupId
+        const pastedParent = groupIdByKey.get(parentKey)
+        if (pastedParent) return pastedParent
+        return targetGroupId
       }
-      if (session.selectedGroupId) layer.groupId = session.selectedGroupId
-      const index = document.layers.findIndex((candidate) => candidate.id === document.activeLayerId) + 1
-      document.layers.splice(Math.max(0, index), 0, layer)
+      const groups: LayerGroup[] = clipboard.groups.map((group) => ({
+        id: groupIdByKey.get(group.key)!,
+        name: `${group.name} 副本`,
+        description: group.description ?? '',
+        displayColor: group.displayColor ? { ...group.displayColor } : undefined,
+        parentGroupId: resolveGroupParent(group.parentKey),
+        visible: group.visible,
+        locked: group.locked,
+        opacity: group.opacity,
+        blendMode: group.blendMode
+      }))
+      const layers = clipboard.layers.map((source) => {
+        const layer = createLayer(`${source.name} 副本`, source.width, source.height, document.colorMode)
+        layer.offsetX = source.offsetX
+        layer.offsetY = source.offsetY
+        layer.visible = source.visible
+        layer.locked = source.locked
+        layer.opacity = source.opacity
+        layer.blendMode = source.blendMode
+        layer.description = source.description ?? ''
+        if (source.displayColor) layer.displayColor = { ...source.displayColor }
+        layer.groupId = source.groupKey ? groupIdByKey.get(source.groupKey) ?? targetGroupId : targetGroupId
+        if (layer.format === 'rgba') layer.pixels.set(source.pixels)
+        else for (let index = 0; index < source.width * source.height; index += 1) {
+          const offset = index * 4
+          layer.pixels[index] = findOrAddPaletteColor(document, { r: source.pixels[offset], g: source.pixels[offset + 1], b: source.pixels[offset + 2], a: source.pixels[offset + 3] })
+        }
+        return layer
+      })
+      const index = targetContainerTopIndex(document, targetGroupId)
       const previousActiveId = document.activeLayerId
       const previousSelection = [...session.selectedLayerIds]
-      document.activeLayerId = layer.id
+      const previousGroupId = session.selectedGroupId
+      const previousGroupIds = [...session.selectedGroupIds]
+      document.groups.push(...groups)
+      document.layers.splice(index, 0, ...layers)
+      const pastedIds = layers.map((layer) => layer.id)
+      const pastedGroupIds = new Set(groups.map((group) => group.id))
+      document.activeLayerId = layers.at(-1)!.id
       session.selectedGroupId = null
-      session.selectedLayerIds = [layer.id]
+      session.selectedGroupIds = groups.map((group) => group.id)
+      session.selectedLayerIds = pastedIds
       session.history.push({
-        label: '粘贴图层', bytes: layer.pixels.byteLength,
-        undo: () => { document.layers = document.layers.filter((candidate) => candidate.id !== layer.id); document.activeLayerId = previousActiveId; session.selectedLayerIds = previousSelection },
-        redo: () => { if (!document.layers.some((candidate) => candidate.id === layer.id)) document.layers.splice(Math.min(index, document.layers.length), 0, layer); document.activeLayerId = layer.id; session.selectedGroupId = null; session.selectedLayerIds = [layer.id] }
+        label: layers.length === 1 && groups.length === 0 ? '粘贴图层' : '粘贴图层集合',
+        bytes: layers.reduce((sum, layer) => sum + layer.pixels.byteLength, 0) + groups.length * 96,
+        undo: () => {
+          document.layers = document.layers.filter((candidate) => !pastedIds.includes(candidate.id))
+          document.groups = document.groups.filter((candidate) => !pastedGroupIds.has(candidate.id))
+          document.activeLayerId = previousActiveId
+          session.selectedLayerIds = previousSelection
+          session.selectedGroupId = previousGroupId
+          session.selectedGroupIds = previousGroupIds
+        },
+        redo: () => {
+          for (const group of groups) if (!document.groups.some((candidate) => candidate.id === group.id)) document.groups.push(group)
+          const missingLayers = layers.filter((layer) => !document.layers.some((candidate) => candidate.id === layer.id))
+          if (missingLayers.length > 0) document.layers.splice(Math.min(index, document.layers.length), 0, ...missingLayers)
+          document.activeLayerId = layers.at(-1)!.id
+          session.selectedGroupId = null
+          session.selectedGroupIds = groups.map((group) => group.id)
+          session.selectedLayerIds = pastedIds
+        }
       })
     })
-    set({ message: `已粘贴图层“${clipboard.name}”。` })
+    set({ message: clipboard.groups.length > 0 ? `已粘贴图层组，共 ${clipboard.layers.length} 个图层。` : clipboard.layers.length === 1 ? `已粘贴图层“${clipboard.layers[0].name}”。` : `已粘贴 ${clipboard.layers.length} 个图层。` })
     return true
   },
 
@@ -1055,7 +1460,7 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
       copied += 1
     }
     if (copied === 0) { clipboardService.clearSelection(); set({ message: '选区内没有可复制的非透明像素。' }); return }
-    clipboardService.setSelection({ width: selection.width, height: selection.height, pixels, mask })
+    clipboardService.setSelection({ width: selection.width, height: selection.height, originX: selection.x, originY: selection.y, pixels, mask })
     const clipboard = clipboardService.getSelection()
     if (!clipboard) return
     void window.moonSprite.writeClipboardImage(selectionClipboardImage(clipboard)).catch(() => {
@@ -1082,8 +1487,18 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
       // Keep the entire clipboard image, even when it is larger than the
       // document. The floating selection can then be moved until any part of
       // it reaches the canvas instead of losing off-canvas pixels on paste.
-      const x = Math.floor((document.width - clipboard.width) / 2)
-      const y = Math.floor((document.height - clipboard.height) / 2)
+      const { x, y } = resolveClipboardPlacement({
+        width: clipboard.width,
+        height: clipboard.height,
+        originX: clipboard.originX,
+        originY: clipboard.originY,
+        documentWidth: document.width,
+        documentHeight: document.height,
+        viewportWidth: session.viewportSize.width || document.width * session.view.zoom,
+        viewportHeight: session.viewportSize.height || document.height * session.view.zoom,
+        view: session.view,
+        rotationIndicatorPosition: loadEditorPreferences().rotationIndicatorPosition
+      })
       const width = clipboard.width
       const height = clipboard.height
       const pastedMask = clipboard.mask.slice()
@@ -1113,7 +1528,7 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
       }
       const edit = applySelectionTransform(document, source, target, 0, true) ?? beginPixelEdit(layer.id)
       session.selection = cloneSelectionMask(target)
-      session.pendingPaste = { layerId: layer.id, beforeSelection, source, target: cloneSelectionMask(target)!, previewEdit: edit }
+      session.pendingPaste = { layerId: layer.id, beforeSelection, source, target: cloneSelectionMask(target)!, previewEdit: edit, copy: true, label: '粘贴到当前图层' }
       // A paste remains floating until confirmed, so its first drag should move
       // the pasted pixels instead of beginning a new pencil stroke.
       session.tool = 'selection'
@@ -1122,6 +1537,74 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     }, false)
   },
 
+  async pasteAsNewLayer() {
+    if (clipboardService.getLayers()) return get().pasteLayersFromClipboard()
+    const clipboard = await clipboardService.readSelection(() => window.moonSprite.readClipboardImage())
+    const current = activeSession(get())
+    if (!clipboard || !current) { set({ message: '剪贴板中没有可粘贴的内容。' }); return false }
+    get().mutateActive((session) => {
+      const document = session.document
+      const placement = resolveClipboardPlacement({
+        width: clipboard.width,
+        height: clipboard.height,
+        originX: clipboard.originX,
+        originY: clipboard.originY,
+        documentWidth: document.width,
+        documentHeight: document.height,
+        viewportWidth: session.viewportSize.width || document.width * session.view.zoom,
+        viewportHeight: session.viewportSize.height || document.height * session.view.zoom,
+        view: session.view,
+        rotationIndicatorPosition: loadEditorPreferences().rotationIndicatorPosition
+      })
+      const layer = createLayer('粘贴图层', clipboard.width, clipboard.height, document.colorMode)
+      layer.offsetX = placement.x
+      layer.offsetY = placement.y
+      for (let index = 0; index < clipboard.mask.length; index += 1) {
+        if (clipboard.mask[index] !== 1) continue
+        writeLayerColor(document, layer, index, unpackColor(clipboard.pixels[index]))
+      }
+      const insertionIndex = document.layers.length
+      const previousActiveId = document.activeLayerId
+      const previousSelection = [...session.selectedLayerIds]
+      document.layers.push(layer)
+      document.activeLayerId = layer.id
+      session.selectedGroupId = null
+      session.selectedGroupIds = []
+      session.selectedLayerIds = [layer.id]
+      session.layerSelectionAnchorId = layer.id
+      session.history.push({
+        label: '粘贴为新图层',
+        bytes: layer.pixels.byteLength + 64,
+        undo: () => {
+          document.layers = document.layers.filter((candidate) => candidate.id !== layer.id)
+          document.activeLayerId = previousActiveId
+          session.selectedLayerIds = previousSelection
+        },
+        redo: () => {
+          if (!document.layers.some((candidate) => candidate.id === layer.id)) document.layers.splice(Math.min(insertionIndex, document.layers.length), 0, layer)
+          document.activeLayerId = layer.id
+          session.selectedLayerIds = [layer.id]
+        }
+      })
+    })
+    set({ message: '已粘贴为新图层。' })
+    return true
+  },
+
+  async pasteAsNewDocument() {
+    const clipboard = await clipboardService.readSelection(() => window.moonSprite.readClipboardImage())
+    if (!clipboard) { set({ message: '剪贴板中没有可粘贴的图片。' }); return false }
+    const document = createDocument('粘贴的图像', clipboard.width, clipboard.height, 'rgba')
+    const layer = getActiveLayer(document)
+    for (let index = 0; index < clipboard.mask.length; index += 1) {
+      if (clipboard.mask[index] === 1) writeLayerColor(document, layer, index, unpackColor(clipboard.pixels[index]))
+    }
+    document.dirty = true
+    get().addSession(document)
+    set({ message: '已将剪贴板图片粘贴为新项目。' })
+    return true
+  },
+
   updateFloatingPastePreview(edit, target) {
     get().mutateActive((session) => {
       if (!session.pendingPaste) return
@@ -1132,13 +1615,30 @@ export const useWorkspace = create<WorkspaceState>((set, get) => ({
     }, false)
   },
 
+  beginFloatingSelectionTransform(source, edit, before, target, copy, label) {
+    get().mutateActive((session) => {
+      const layer = getActiveLayer(session.document)
+      session.pendingPaste = {
+        layerId: layer.id,
+        beforeSelection: cloneSelectionMask(before),
+        source,
+        target: cloneSelectionMask(target)!,
+        previewEdit: edit,
+        copy,
+        label
+      }
+      session.selection = cloneSelectionMask(target)
+      session.revision += 1
+    }, false)
+  },
+
   commitFloatingPaste() {
     const current = activeSession(get())
     if (!current?.pendingPaste) return
     get().mutateActive((session) => {
       const pending = session.pendingPaste
       if (!pending) return
-      const pixelEntry = commitPixelEdit(session.document, pending.previewEdit, '粘贴到当前图层')
+      const pixelEntry = commitPixelEdit(session.document, pending.previewEdit, pending.label)
       const beforeSelection = cloneSelectionMask(pending.beforeSelection)
       const afterSelection = cloneSelectionMask(pending.target)
       session.pendingPaste = null
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index e868d37..350d1aa 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -146,13 +146,16 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 
 .editor-layout { position: relative; display: grid; grid-template-columns: 57px minmax(0, 1fr) 6px 310px; min-height: 0; }
 .tool-rail { grid-area: toolrail; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 5px 7px; background: #171a21; border-right: 1px solid #303641; border-left: 1px solid #303641; }
+.tool-icon-preload { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
+.tool-icon-preload img { display: block; width: 32px; height: 32px; }
 .tool-rail-grip { display: grid; flex: 0 0 20px; place-items: center; width: 44px; height: 20px; color: #727b89; background: transparent; border-bottom: 1px solid #303641; cursor: var(--cursor-swatch-edge); touch-action: none; }
 .tool-rail-grip:hover { color: #f1f4f8; background: #20242d; }
 .tool-rail-dock-preview { position: fixed; z-index: 10000; top: 50%; width: 5px; height: 88px; pointer-events: none; background: #2979ff; transform: translateY(-50%); }
 .tool-rail-dock-preview.left { left: 3px; }
 .tool-rail-dock-preview.right { right: 3px; }
 .tool-slot { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
-.tool-rail .tool-slot > button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: #9aa3b2; background: #171a21; border: 1px solid transparent; }
+.tool-rail .tool-slot > button, .tool-rail .tool-slot > .rail-tool-tooltip > button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: #9aa3b2; background: #171a21; border: 1px solid transparent; }
+.rail-tool-tooltip { display: block; width: 44px; height: 44px; }
 .tool-rail button:hover { color: #f1f4f8; background: #20242d; border-color: #303641; }
 .tool-rail button.selected { color: #f1f4f8; background: #20242d; border-color: #2979ff; box-shadow: inset 2px 0 #2979ff; }
 .tool-rail small { position: absolute; right: 3px; bottom: 2px; color: #9aa3b2; font: 8px/1 ui-monospace, Consolas, monospace; }
@@ -161,8 +164,15 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .tool-flyout .pixel-asset-icon { width: 32px; height: 32px; }
 .tool-flyout { position: absolute; z-index: 70; left: 48px; top: 0; display: grid; gap: 2px; padding: 3px; background: #171a21; border: 1px solid #454d5c; }
 .tool-rail.side-right .tool-flyout { right: 48px; left: auto; }
-.shape-flyout { grid-template-columns: repeat(2, 34px); }
-.selection-flyout { grid-template-columns: repeat(4, 34px); }
+.shape-flyout { grid-template-columns: repeat(4, 34px); }
+.selection-flyout { grid-template-columns: repeat(5, 34px); }
+.tool-flyout-tooltip { display: block; width: 34px; height: 34px; }
+.moon-tooltip > strong, .moon-tooltip > span, .moon-tooltip > small { display: block; }
+.moon-tooltip > span { margin-top: 3px; color: #d4dae4; }
+.moon-tooltip > small { margin-top: 4px; color: #9aa3b2; font-size: 10px; }
+.shape-ratio-control { display: flex; align-items: center; gap: 8px; }
+.shape-ratio-inputs { display: flex; align-items: center; gap: 5px; }
+.shape-ratio-control .number-input { width: 66px; }
 .tool-rail .tool-flyout button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #9aa3b2; background: #20242d; border: 1px solid #303641; }
 .tool-rail .tool-flyout button:hover, .tool-rail .tool-flyout button.selected { color: #fff; border-color: #2979ff; background: #2979ff; }
 .tool-divider { width: 26px; height: 1px; margin: 4px 0; background: #303641; }
@@ -322,8 +332,12 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .temporary-brush-save { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #303641; }
 .temporary-brush-save input { min-width: 0; height: 27px; padding: 0 7px; color: #f1f4f8; background: #0a0c10; border: 1px solid #303641; }
 .temporary-brush-save button { height: 27px; padding: 0 9px; color: #fff; background: #2979ff; border: 1px solid #86b0ff; }
-.brush-paint-mode-select { height: 28px; min-width: 132px; padding: 0 24px 0 7px; color: #d4dae4; background: #0a0c10; border: 1px solid #303641; font-size: 11px; }
-.brush-paint-mode-select:hover { border-color: #596271; }
+.brush-paint-mode-select { display: inline-flex; min-width: 148px; }
+.brush-paint-mode-select .themed-select, .brush-paint-mode-select .themed-select-trigger { width: 100%; }
+.brush-paint-mode-select .themed-select-trigger { height: 28px; font-size: 11px; }
+.themed-select-option-copy { display: grid; min-width: 0; gap: 2px; text-align: left; }
+.themed-select-option-copy strong { overflow: hidden; color: inherit; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
+.themed-select-option-copy small { color: #7f8998; font-size: 10px; line-height: 1.35; white-space: normal; }
 .tool-options-spacer { flex: 1; }
 .rotate-view-options { display: flex; align-items: center; gap: 8px; }
 .rotate-view-options > label { gap: 6px; }
@@ -426,6 +440,8 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .floating-resize-handle.resize-nw { top: -12px; left: -12px; cursor: var(--cursor-nwse-resize); }
 .floating-resize-handle.resize-se { right: -12px; bottom: -12px; cursor: var(--cursor-nwse-resize); }
 .floating-resize-handle.resize-sw { bottom: -12px; left: -12px; cursor: var(--cursor-nesw-resize); }
+.floating-resize-portal { position: fixed; overflow: visible; pointer-events: none; }
+.floating-resize-portal .floating-resize-handle { pointer-events: auto; }
 .canvas-resize-modal { width: min(440px, calc(100vw - 32px)); }
 .outline-modal { width: min(560px, calc(100vw - 32px)); }
 .outline-modal-body { grid-template-columns: 230px minmax(230px, 1fr); grid-template-areas: 'color width' 'color settings' 'color preview'; align-items: start; gap: 12px 14px; }
@@ -556,7 +572,11 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .color-value-trigger small { color: #9aa3b2; font-size: 10px; white-space: nowrap; }
 .color-value-swatch { position: relative; display: block; width: 22px; height: 18px; overflow: hidden; background: repeating-conic-gradient(#6e7278 0 25%, #b7b9bc 0 50%) 50% / 8px 8px; border: 1px solid #090a0d; }
 .color-value-swatch i { position: absolute; inset: 0; }
-.color-editor-popover { position: fixed; z-index: 620; display: grid; gap: 9px; width: min(468px, calc(100vw - 16px)); padding: 9px; color: #d4dae4; background: #171a21; border: 1px solid #596271; }
+.color-editor-popover { position: fixed; z-index: 620; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: min(420px, calc(100vw - 16px)); min-height: min(240px, calc(100vh - 16px)); max-width: min(720px, calc(100vw - 16px)); max-height: min(480px, calc(100vh - 16px)); gap: 9px; padding: 9px; color: #d4dae4; background: #171a21; border: 1px solid #596271; }
+.color-editor-titlebar { display: flex; align-items: center; justify-content: space-between; min-height: 27px; padding: 0 0 5px 4px; border-bottom: 1px solid #303641; cursor: var(--cursor-move); user-select: none; }
+.color-editor-titlebar strong { font-size: 11px; font-weight: 600; }
+.color-editor-titlebar .icon-button { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; }
+.color-editor-titlebar .icon-button svg { display: block; }
 .color-editor-toolbar { display: grid; grid-template-columns: minmax(214px, 1fr) 132px 42px; align-items: stretch; gap: 6px; min-width: 0; }
 .color-editor-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; min-width: 0; }
 .color-editor-tabs button { height: 28px; color: #9aa3b2; background: #0f1116; border: 1px solid #303641; font: 10px/1 ui-monospace, Consolas, monospace; }
@@ -566,20 +586,30 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .color-editor-hex input { width: 100%; min-width: 0; height: 26px; padding: 0; color: #f1f4f8; background: transparent; border: 0; outline: 0 !important; font: inherit; }
 .color-editor-current-swatch { position: relative; display: block; width: 42px; height: 28px; overflow: hidden; background: repeating-conic-gradient(#686d76 0 25%, #aeb3bc 0 50%) 50% / 10px 10px; border: 1px solid #303641; }
 .color-editor-current-swatch i { position: absolute; inset: 0; }
-.color-editor-fields { display: grid; gap: 5px; }
+.color-editor-fields { display: grid; grid-template-rows: repeat(var(--color-field-count), minmax(28px, 1fr)); gap: 5px; min-height: 0; }
 .color-editor-field { display: grid; grid-template-columns: 18px minmax(0, 1fr) 74px; align-items: center; gap: 7px; min-width: 0; color: #c6ccd6; font: 11px/1 ui-monospace, Consolas, monospace; }
 .color-editor-field-label { text-align: center; }
-.color-editor-range { width: 100%; height: 22px; margin: 0; padding: 0; appearance: none; border: 1px solid #303641; }
-.color-editor-range::-webkit-slider-runnable-track { height: 18px; background: transparent; border: 0; }
-.color-editor-range::-webkit-slider-thumb { width: 8px; height: 22px; margin-top: -2px; appearance: none; background: #f1f4f8; border: 1px solid #090a0d; box-shadow: 0 0 0 1px #596271; }
-.color-editor-range::-moz-range-track { height: 18px; background: transparent; border: 0; }
-.color-editor-range::-moz-range-thumb { width: 8px; height: 22px; background: #f1f4f8; border: 1px solid #090a0d; border-radius: 0; }
+.color-editor-range { width: 100%; height: 28px; margin: 0; padding: 0; appearance: none; border: 1px solid #303641; }
+.color-editor-range::-webkit-slider-runnable-track { height: 24px; background: transparent; border: 0; }
+.color-editor-range::-webkit-slider-thumb { width: 8px; height: 28px; margin-top: -2px; appearance: none; background: #f1f4f8; border: 1px solid #090a0d; box-shadow: 0 0 0 1px #596271; }
+.color-editor-range::-moz-range-track { height: 24px; background: transparent; border: 0; }
+.color-editor-range::-moz-range-thumb { width: 8px; height: 28px; background: #f1f4f8; border: 1px solid #090a0d; border-radius: 0; }
 .color-editor-field .number-input { height: 28px; }
 .color-editor-field .number-input-editor > input { height: 26px !important; }
 .color-editor-field .number-input-stepper { height: 26px; }
 .color-editor-field .number-input-stepper button { height: 13px; }
 .preference-color-value-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
 .preference-color-value-list .color-value-trigger { height: 34px; }
+.preference-layer-colors .preference-checker-color-heading > div { display: flex; gap: 6px; }
+.preference-layer-colors .preference-checker-color-heading button { white-space: nowrap; }
+.preference-layer-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
+.preference-layer-color-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 5px; min-width: 0; }
+.preference-layer-color-row .color-value-trigger { min-width: 0; height: 34px; }
+.delete-icon-button { display: grid; flex: 0 0 auto; place-items: center; padding: 0; color: #8d97a6; background: #171a21; border: 1px solid #303641; }
+.delete-icon-button.compact { width: 28px; height: 28px; }
+.delete-icon-button.regular { width: 34px; height: 34px; }
+.delete-icon-button:hover:not(:disabled) { color: #ff8b8b; background: #24171a; border-color: #7a4248; }
+.delete-icon-button:disabled { color: #555d69; background: #12151a; border-color: #292f39; opacity: .65; }
 .color-values-popover label { display: grid; gap: 4px; min-width: 0; color: #9aa3b2; font: 10px/1 ui-monospace, Consolas, monospace; }
 .color-values-popover input { width: 100%; min-width: 0; height: 30px; padding: 0 6px; color: #f1f4f8; background: #0a0c10; border: 1px solid #303641; font: 11px ui-monospace, Consolas, monospace; }
 .rgba-value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
@@ -706,9 +736,12 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .layer-drop-indicator i { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
 .layer-drop-indicator i:first-child { border-left: 6px solid #2979ff; }
 .layer-drop-indicator i:last-child { border-right: 6px solid #2979ff; }
-.layer-row.group-row { grid-template-columns: 26px 26px 26px minmax(0, 1fr); min-height: 38px; background: #0f1116; border-top: 1px solid #303641; }
+.layer-row.group-row { grid-template-columns: 26px 26px 26px minmax(0, 1fr); min-height: 38px; background: #171a21; border-top: 1px solid #303641; }
+.layer-row.group-row.selected { color: #f1f4f8; background: #20242d; box-shadow: none; }
 .layer-row.group-drop-target { color: #fff; background: #20242d; }
-.layer-root-drop-target { position: sticky; z-index: 7; right: 5px; bottom: 4px; left: 5px; display: grid; place-items: center; height: 28px; margin: 4px; color: #dbe8ff; background: rgb(41 121 255 / 18%); border: 1px solid #2979ff; pointer-events: none; font-size: 11px; }
+.layer-edge-drop-indicator { position: absolute; z-index: 9; left: 8px; right: 2px; height: 2px; background: #2979ff; pointer-events: none; }
+.layer-edge-drop-indicator.top { top: 0; }
+.layer-edge-drop-indicator.bottom { bottom: 0; }
 .layer-row:active { cursor: var(--cursor-default); }
 .layer-row.dragging:active { cursor: var(--cursor-grabbing); }
 .layer-visibility { display: grid; place-items: center; width: 26px; height: 26px; color: #9aa3b2; }
@@ -738,7 +771,7 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .preview-canvas-wrap canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
 
 .statusbar { display: flex; align-items: center; gap: 14px; padding: 0 10px; color: #9aa3b2; background: #171a21; border-top: 1px solid #303641; font: 11px/1 ui-monospace, Consolas, monospace; }
-.advanced-mode-notice { position: fixed; top: 50%; left: 50%; z-index: 10050; display: grid; gap: 6px; min-width: 210px; padding: 12px 22px; color: #fff; background: #20242d; border: 2px solid #2979ff; text-align: center; font-size: 14px; font-weight: 700; pointer-events: none; transform: translate(-50%, -50%); }
+.advanced-mode-notice { position: fixed; top: 128px; left: 50%; z-index: 10050; display: grid; gap: 6px; min-width: 210px; padding: 10px 20px; color: #fff; background: #20242d; border: 2px solid #2979ff; text-align: center; font-size: 14px; font-weight: 700; pointer-events: none; transform: translateX(-50%); }
 .advanced-mode-notice small { color: #a6adb9; font: 11px/1.2 ui-monospace, Consolas, monospace; }
 .save-progress-backdrop { z-index: 10060; background: rgba(7, 9, 13, 0.28); }
 .save-progress-modal { width: min(228px, calc(100vw - 32px)); }
@@ -832,7 +865,10 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .quiet-button:hover { border-color: #454d5c; background: #303641; }
 .modal-backdrop { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: transparent; }
 .dialog-backdrop { z-index: 400; }
-.modal { position: fixed; top: 50%; left: 50%; z-index: 210; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; pointer-events: auto; background: #171a21; border: 1px solid #454d5c; transform: translate(-50%, -50%); }
+.modal { position: fixed; top: 50%; left: 50%; z-index: 210; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; pointer-events: auto; background: #171a21; border: 1px solid #454d5c; transform: translate(-50%, -50%); }
+.modal.resizable-modal { top: auto; left: auto; display: flex; flex-direction: column; overflow: hidden; transform: none; }
+.resizable-modal > .modal-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
+.resizable-modal > .settings-layout, .resizable-modal > .workspace-manager-list, .resizable-modal > .about-content, .resizable-modal > .confirm-content, .resizable-modal > .save-progress-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
 .dialog-backdrop .modal { z-index: 410; }
 .modal.outline-modal { width: min(560px, calc(100vw - 32px)); }
 .workspace-save-dialog { width: min(420px, calc(100vw - 32px)); }
@@ -870,11 +906,11 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .workspace-manager-footer svg { flex: 0 0 auto; }
 .outline-modal-body { grid-template-columns: 230px minmax(230px, 1fr); }
 @media (max-width: 620px) { .outline-modal-body { grid-template-columns: 1fr; } }
-.modal header { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 12px 16px; border-bottom: 1px solid #303641; background: #20242d; cursor: var(--cursor-move); user-select: none; }
+.modal header { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 9px 13px; border-bottom: 1px solid #303641; background: #20242d; cursor: var(--cursor-move); user-select: none; }
 .modal header button { cursor: var(--cursor-pointer); }
-.modal h2 { margin: 4px 0 0; font-size: 18px; }
+.modal h2 { margin: 3px 0 0; font-size: 16px; }
 .eyebrow { color: #2979ff; font: 11px/1 ui-monospace, Consolas, monospace; }
-.modal-body { display: grid; gap: 13px; padding: 16px; }
+.modal-body { display: grid; gap: 12px; padding: 13px; }
 .modal-body > label, .modal fieldset { display: grid; gap: 6px; color: #9aa3b2; font-size: 12px; }
 .modal-body > label { position: relative; }
 .input-suffix { position: absolute; right: 9px; bottom: 9px; color: #9aa3b2; font: 11px/1 ui-monospace, Consolas, monospace; pointer-events: none; }
@@ -927,7 +963,7 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .modal-note { margin: 0; color: #9aa3b2; font-size: 12px; line-height: 1.5; }
 .field-error { margin: -2px 0 0; color: #ffb1b8; font-size: 11px; line-height: 1.4; }
 .modal-body input[aria-invalid="true"] { border-color: #b9505e; }
-.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #303641; background: #0f1116; }
+.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 13px; border-top: 1px solid #303641; background: #0f1116; }
 .shortcut-settings { display: grid; gap: 0; max-height: min(60vh, 520px); overflow: auto; }
 .shortcut-settings label { display: grid; grid-template-columns: 1fr 128px; align-items: center; gap: 12px; min-height: 38px; padding: 0 2px; border-bottom: 1px solid #252b35; }
 .shortcut-settings input { height: 26px; text-align: center; color: #d9e4ff; background: #0a0c10; border: 1px solid #3b4352; cursor: var(--cursor-pointer); }
@@ -949,6 +985,8 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .settings-layout > main::-webkit-scrollbar-track { background: #0f1116; }
 .settings-layout > main::-webkit-scrollbar-thumb { background: #596271; border: 2px solid #0f1116; }
 .settings-layout > main > label { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 12px; color: #c2cad5; white-space: nowrap; }
+.settings-layout > main > .preference-field { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 12px; color: #c2cad5; white-space: nowrap; }
+.preference-static-value { min-height: 30px; padding: 6px 9px; color: #edf2fb; background: #0b0e13; border: 1px solid #303641; }
 .settings-layout > main > label.preference-field > .themed-select, .settings-layout > main > label.preference-field > .number-input { min-width: 0; }
 .settings-layout > main > label.tool-checkbox { display: flex; }
 .settings-layout > main > label.preference-toggle { display: flex; align-items: center; min-height: 35px; padding: 0 9px; background: #0f1116; border: 1px solid #303641; cursor: var(--cursor-pointer); }
@@ -960,15 +998,14 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .preference-presets > section > header button { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 8px; color: #b8c1cf; background: #20242d; border: 1px solid #394250; font-size: 11px; }
 .preference-presets > section > header button:hover { color: #fff; border-color: #596476; }
 .preference-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
-.document-size-preset-row, .export-scale-preset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 27px; align-items: center; gap: 5px; min-width: 0; }
-.export-scale-preset-row { grid-template-columns: minmax(0, 1fr) 27px; }
+.document-size-preset-row, .export-scale-preset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 28px; align-items: center; gap: 5px; min-width: 0; }
+.export-scale-preset-row { grid-template-columns: minmax(0, 1fr) 28px; }
 .preference-preset-grid .number-input { height: 28px; }
 .preference-preset-grid .number-input-editor > input { height: 26px !important; }
 .preference-preset-grid .number-input-stepper { grid-template-rows: repeat(2, 13px); height: 26px; }
 .preference-preset-grid .number-input-stepper button { height: 13px; }
 .preference-preset-grid > div > span { color: #7f8998; font: 11px/1 ui-monospace, Consolas, monospace; }
-.preference-preset-grid .icon-button { width: 27px; height: 28px; color: #8d97a6; background: #171a21; border: 1px solid #303641; }
-.preference-preset-grid .icon-button:hover:not(:disabled) { color: #ff8b8b; border-color: #7a4248; }
+.preference-preset-grid .delete-icon-button { width: 28px; height: 28px; }
 .preference-checker-colors { display: grid; gap: 7px; min-height: 0; }
 .preference-checker-color-heading { display: flex; align-items: center; justify-content: space-between; min-height: 28px; color: #c6ccd6; font-size: 11px; }
 .preference-checker-color-heading button { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 8px; font-size: 11px; }
@@ -988,7 +1025,7 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .shortcut-conflict { margin: 0; padding: 7px 9px; color: #ffb3aa; background: #472124; border: 1px solid #873e43; font-size: 12px; }
 .settings-modal footer .quiet-button, .settings-modal footer .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
 .adjustment-modal { display: flex; flex-direction: column; width: min(520px, calc(100vw - 32px)); overflow: hidden; }
-.adjustment-modal-body { min-height: 0; gap: 12px; overflow: auto; }
+.adjustment-modal-body { min-height: 0; gap: 12px; overflow: hidden; }
 .curve-channel-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; align-self: stretch; }
 .curve-channel-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 29px; color: #aeb7c5; background: #171a21; border: 1px solid #303641; font-size: 11px; font-weight: 600; }
 .curve-channel-tabs button i { display: block; flex: 0 0 7px; width: 7px; height: 7px; background: var(--curve-color); border: 1px solid color-mix(in srgb, var(--curve-color) 72%, #fff); }
@@ -1114,6 +1151,7 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .recent-files-list { min-width: 0; min-height: 0; overflow: auto; }
 .recent-file-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: stretch; min-width: 0; border-bottom: 1px solid #303641; }
 .recent-file-row.reorderable { grid-template-columns: minmax(0, 1fr) 30px 30px; }
+.recent-file-row.reorderable.removable { grid-template-columns: minmax(0, 1fr) 30px 30px 30px; }
 .recent-file-row.deletable { grid-template-columns: minmax(0, 1fr) 30px 30px; }
 .recent-file-row:last-child { border-bottom: 0; }
 .recent-file-row:hover { background: #20242d; }
@@ -1131,7 +1169,7 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .recent-file-copy small { color: #9aa3b2; font-size: 10px; }
 .recent-file-copy > span { overflow: hidden; color: #727b89; font: 9px/1.3 ui-monospace, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
 .recent-file-open time { align-self: center; color: #727b89; font: 9px/1.4 ui-monospace, Consolas, monospace; text-align: right; white-space: nowrap; }
-.recent-file-pin, .recent-file-delete, .recent-file-reorder { display: grid; place-items: center; align-self: stretch; width: 30px; min-height: 30px; padding: 0; color: #596271; background: transparent; }
+.recent-file-pin, .recent-file-delete, .recent-file-remove, .recent-file-reorder { display: grid; place-items: center; align-self: stretch; width: 30px; min-height: 30px; padding: 0; color: #596271; background: transparent; }
 .recovery-file-row { grid-template-columns: minmax(0, 1fr) 34px; }
 .recovery-file-row .recent-file-preview { color: #e0a65a; }
 .recovery-file-row .recent-file-copy small { color: #e0a65a; }
@@ -1140,6 +1178,7 @@ input[type="range"]:focus, input[type="range"]:focus-visible { outline: 0; box-s
 .recovery-count { display: grid; flex: 0 0 15px; place-items: center; min-width: 15px; height: 15px; margin: 0; padding: 0 3px; color: #fff; background: #b43f54; font: 10px/1 ui-monospace, Consolas, monospace; }
 .recent-file-pin:hover, .recent-file-row.pinned .recent-file-pin { color: #fff; background: #2979ff; }
 .recent-file-delete:hover { color: #fff; background: #6b252c; }
+.recent-file-remove:hover { color: #fff; background: #394151; }
 .recent-file-reorder { cursor: var(--cursor-swatch-edge); touch-action: none; }
 .recent-file-reorder:hover, .recent-file-row.dragging .recent-file-reorder { color: #fff; background: #303641; }
 .start-screen-state { display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 250px; padding: 24px; color: #9aa3b2; font-size: 12px; text-align: center; }
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 508c70f..4a5bccd 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -69,7 +69,8 @@ export interface BrushListing {
   directoryPath: string
   brushes: StoredBrush[]
 }
-export type ShapeKind = 'rectangle' | 'ellipse'
+export type ShapeKind = 'rectangle' | 'ellipse' | 'rectangle-outline' | 'ellipse-outline'
+export interface ShapeRatio { width: number; height: number }
 export type FillMode = 'contiguous' | 'global'
 export type BlendMode =
   | 'normal'
@@ -165,6 +166,8 @@ export type RasterLayer = RgbaLayer | IndexedLayer
 export interface LayerGroup {
   id: string
   name: string
+  /** 空组没有子图层可定位时，保存它在统一图层堆栈中的顺序锚点。 */
+  panelOrder?: number
   /** Optional visual marker shown in the layer panel. */
   displayColor?: RgbaColor
   /** Optional user-facing note shown when hovering the group row. */
@@ -214,6 +217,8 @@ export interface SpriteDocument {
   customBrushes?: ProjectBrush[]
   /** Animation metadata is independent from layer ordering and optional for v1 compatibility. */
   animation?: AnimationTimeline
+  /** Project-owned defaults for the selection outline dialog. */
+  outlineSettings?: OutlineSettings
   filePath: string | null
   /** Original path used to open imported images or Aseprite projects. */
   sourceFilePath?: string
@@ -235,11 +240,19 @@ export interface SelectionRect {
 }
 
 export type SelectionMode = 'replace' | 'add' | 'subtract' | 'intersect'
-export type SelectionKind = 'rectangle' | 'ellipse' | 'magic' | 'lasso'
+export type SelectionKind = 'rectangle' | 'ellipse' | 'magic' | 'lasso' | 'polygon-lasso'
 export type OutlinePosition = 'inside' | 'outside' | 'both'
 export type OutlineKernel = 'round' | 'square' | 'horizontal' | 'vertical'
 export type OutlineDirection = 'nw' | 'n' | 'ne' | 'w' | 'e' | 'sw' | 's' | 'se'
 export type OutlineDirections = Record<OutlineDirection, boolean>
+export interface OutlineSettings {
+  color: RgbaColor
+  thickness: number
+  position: OutlinePosition
+  kernel: OutlineKernel
+  directions: OutlineDirections
+  previewEnabled: boolean
+}
 export type CanvasAnchor = 'nw' | 'n' | 'ne' | 'w' | 'center' | 'e' | 'sw' | 's' | 'se'
 
 /** A cropped pixel mask. A missing mask retains legacy rectangular selection semantics. */
@@ -259,6 +272,8 @@ export interface ViewState {
   mirroredVertical: boolean
   showGrid: boolean
   relativeLuminance: boolean
+  /** View-only selection outline visibility. The selection itself remains active. */
+  showSelectionOutline?: boolean
 }
 
 export interface ResourceInfo {