@muxiuesd/dsh-pixel-studio 0.1.1 → 0.3.0

package/client.js

@@ -65,12 +65,25 @@ window.__ModuleLoader__.load({
         ];
         /** Keep in sync with MAX_SIDE in index.js. */
         const MAX_SIDE = 256;
+        /** Keep in sync with MAX_EXPORT_PIXELS in index.js. */
+        const MAX_EXPORT_PIXELS = 4096 * 4096;
+        /** Magnifications offered by the Save-as dialog. */
+        const EXPORT_SCALES = [1, 2, 3, 4, 6, 8, 12, 16];
+        /** One character per palette slot, so an import can never use more colours than this. */
+        const IMPORT_MAX_COLORS = CHARS.length;
+        /** Where existing content sits when the canvas grows or shrinks. */
+        const ANCHORS = [
+            { id: 'nw', label: '↖' }, { id: 'n', label: '↑' }, { id: 'ne', label: '↗' },
+            { id: 'w', label: '←' }, { id: 'c', label: '·' }, { id: 'e', label: '→' },
+            { id: 'sw', label: '↙' }, { id: 's', label: '↓' }, { id: 'se', label: '↘' },
+        ];
 
         const TOOLS = [
             { id: 'pencil', label: '铅笔', key: 'B', icon: 'pencil' },
             { id: 'eraser', label: '橡皮', key: 'E', icon: 'eraser' },
             { id: 'bucket', label: '油漆桶', key: 'G', icon: 'bucket' },
             { id: 'picker', label: '吸管', key: 'I', icon: 'picker' },
+            { id: 'select', label: '选区', key: 'M', icon: 'select' },
         ];
 
         /* ------------------------------------------------------------------ */
@@ -346,6 +359,431 @@ window.__ModuleLoader__.load({
             return /\.png$/i.test(trimmed) ? trimmed : `${trimmed}.png`;
         }
 
+        /* ------------------------------------------------------------------ */
+        /* canvas resize                                                      */
+        /* ------------------------------------------------------------------ */
+
+        /** Undo snapshot; width/height ride along so a canvas resize can be undone. */
+        function snapshotOf(doc) {
+            return {
+                palette: doc.palette.slice(),
+                layers: doc.layers.map((layer) => ({ ...layer, rows: layer.rows.slice() })),
+                w: doc.w,
+                h: doc.h,
+            };
+        }
+
+        /** Offset that keeps existing pixels at the chosen anchor when the canvas changes size. */
+        function anchorOffsets(anchor, oldWidth, oldHeight, newWidth, newHeight) {
+            const id = typeof anchor === 'string' && anchor.length > 0 ? anchor : 'c';
+            const dx = id.includes('w') ? 0
+                : id.includes('e') ? newWidth - oldWidth
+                    : Math.round((newWidth - oldWidth) / 2);
+            const dy = id.includes('n') ? 0
+                : id.includes('s') ? newHeight - oldHeight
+                    : Math.round((newHeight - oldHeight) / 2);
+            return [dx, dy];
+        }
+
+        /** Re-frames one layer onto a new canvas: grown areas become transparent, cropped pixels go away. */
+        function resizeRows(rows, oldWidth, oldHeight, newWidth, newHeight, anchor) {
+            const [dx, dy] = anchorOffsets(anchor, oldWidth, oldHeight, newWidth, newHeight);
+            const next = [];
+            for (let y = 0; y < newHeight; y += 1) {
+                const sourceY = y - dy;
+                const row = sourceY >= 0 && sourceY < oldHeight ? String(rows[sourceY] === undefined ? '' : rows[sourceY]) : '';
+                let line = '';
+                for (let x = 0; x < newWidth; x += 1) {
+                    const sourceX = x - dx;
+                    const ch = sourceX >= 0 && sourceX < oldWidth ? row[sourceX] : undefined;
+                    line += ch === undefined || ch === '' ? '.' : ch;
+                }
+                next.push(line);
+            }
+            return next;
+        }
+
+        /* ------------------------------------------------------------------ */
+        /* selection                                                          */
+        /* ------------------------------------------------------------------ */
+
+        const MIN_SELECTION = 1;
+
+        /** Normalised rectangle spanning two grid cells (both inclusive). */
+        function selectionBetween(a, b) {
+            return {
+                x: Math.min(a.x, b.x),
+                y: Math.min(a.y, b.y),
+                w: Math.abs(a.x - b.x) + 1,
+                h: Math.abs(a.y - b.y) + 1,
+            };
+        }
+
+        /** Keeps a rectangle inside the canvas, shrinking it at the far edges. */
+        function clampRectangle(rect, width, height) {
+            const x = clamp(Math.round(rect.x), 0, Math.max(0, width - MIN_SELECTION));
+            const y = clamp(Math.round(rect.y), 0, Math.max(0, height - MIN_SELECTION));
+            const w = clamp(Math.round(rect.w), MIN_SELECTION, Math.max(MIN_SELECTION, width - x));
+            const h = clamp(Math.round(rect.h), MIN_SELECTION, Math.max(MIN_SELECTION, height - y));
+            return { x, y, w, h };
+        }
+
+        /** Slides a rectangle to (x, y) without changing its size or leaving the canvas. */
+        function moveRectangle(rect, x, y, width, height) {
+            return {
+                x: clamp(Math.round(x), 0, Math.max(0, width - rect.w)),
+                y: clamp(Math.round(y), 0, Math.max(0, height - rect.h)),
+                w: rect.w,
+                h: rect.h,
+            };
+        }
+
+        function pointInRectangle(rect, cell) {
+            return cell.x >= rect.x && cell.x < rect.x + rect.w && cell.y >= rect.y && cell.y < rect.y + rect.h;
+        }
+
+        /** Copies the selected characters out of one layer, padding short rows. */
+        function readRegion(rows, rect) {
+            const region = [];
+            for (let y = 0; y < rect.h; y += 1) {
+                const line = rows[rect.y + y] || '';
+                region.push(line.slice(rect.x, rect.x + rect.w).padEnd(rect.w, '.'));
+            }
+            return region;
+        }
+
+        /** Writes characters back into one layer, leaving every other cell untouched. */
+        function writeRegion(rows, region, x, y) {
+            const next = rows.slice();
+            for (let row = 0; row < region.length; row += 1) {
+                const target = y + row;
+                if (target < 0 || target >= next.length) continue;
+                const chars = (next[target] || '').split('');
+                for (let column = 0; column < region[row].length; column += 1) {
+                    const at = x + column;
+                    if (at >= 0 && at < chars.length) chars[at] = region[row][column] || '.';
+                }
+                next[target] = chars.join('');
+            }
+            return next;
+        }
+
+        function blankRegion(rect) {
+            const region = [];
+            for (let y = 0; y < rect.h; y += 1) region.push('.'.repeat(rect.w));
+            return region;
+        }
+
+        function fillRows(rows, rect, ch) {
+            const region = [];
+            for (let y = 0; y < rect.h; y += 1) region.push(ch.repeat(rect.w));
+            return writeRegion(rows, region, rect.x, rect.y);
+        }
+
+        function emptyRows(rows, rect) {
+            return writeRegion(rows, blankRegion(rect), rect.x, rect.y);
+        }
+
+        /** Mirrors the selected characters inside the box. */
+        function mirrorRows(rows, rect, horizontal) {
+            const region = readRegion(rows, rect);
+            const flipped = horizontal
+                ? region.map((line) => line.split('').reverse().join(''))
+                : region.slice().reverse();
+            return writeRegion(rows, flipped, rect.x, rect.y);
+        }
+
+        /** Top-most visible character in every cell of the rectangle, for the move preview. */
+        function mergedRegion(layers, rect) {
+            const region = blankRegion(rect);
+            layers.forEach((layer) => {
+                if (layer.visible === false) return;
+                for (let y = 0; y < rect.h; y += 1) {
+                    const line = layer.rows[rect.y + y] || '';
+                    const chars = region[y].split('');
+                    for (let x = 0; x < rect.w; x += 1) {
+                        const ch = line[rect.x + x];
+                        if (ch && ch !== '.') chars[x] = ch;
+                    }
+                    region[y] = chars.join('');
+                }
+            });
+            return region;
+        }
+
+        /* ------------------------------------------------------------------ */
+        /* image import                                                       */
+        /* ------------------------------------------------------------------ */
+
+        /** Largest integer magnification whose PNG stays under the host's pixel cap. */
+        function maxScaleFor(width, height) {
+            return Math.max(1, Math.floor(Math.sqrt(MAX_EXPORT_PIXELS / Math.max(1, width * height))));
+        }
+
+        /** Remembered export magnification, clamped to what the host can encode for this canvas. */
+        function clampExportScale(value, width, height) {
+            const wanted = Math.round(Number(value) || 1);
+            if (!Number.isFinite(wanted) || wanted < 1) return 1;
+            const ceiling = Math.min(64, maxScaleFor(width, height));
+            return wanted > ceiling ? ceiling : wanted;
+        }
+
+        function clampByte(value) {
+            const number = Math.round(Number(value) || 0);
+            if (number < 0) return 0;
+            return number > 255 ? 255 : number;
+        }
+
+        function hex2(value) {
+            return clampByte(value).toString(16).padStart(2, '0');
+        }
+
+        function rgbOf(color) {
+            return [Number(color[0]) || 0, Number(color[1]) || 0, Number(color[2]) || 0];
+        }
+
+        function colorDistanceSq(a, b) {
+            const dr = a[0] - b[0];
+            const dg = a[1] - b[1];
+            const db = a[2] - b[2];
+            return dr * dr + dg * dg + db * db;
+        }
+
+        function nearestColorIndex(paletteRgb, color) {
+            let best = 0;
+            let bestDistance = Infinity;
+            for (let i = 0; i < paletteRgb.length; i += 1) {
+                const distance = colorDistanceSq(paletteRgb[i], color);
+                if (distance < bestDistance) {
+                    bestDistance = distance;
+                    best = i;
+                }
+            }
+            return best;
+        }
+
+        /** RGB extent of a colour box: [ranges, channel with the widest range]. */
+        function boxExtent(box) {
+            let minR = 255; let minG = 255; let minB = 255;
+            let maxR = 0; let maxG = 0; let maxB = 0;
+            for (const color of box) {
+                if (color[0] < minR) minR = color[0];
+                if (color[1] < minG) minG = color[1];
+                if (color[2] < minB) minB = color[2];
+                if (color[0] > maxR) maxR = color[0];
+                if (color[1] > maxG) maxG = color[1];
+                if (color[2] > maxB) maxB = color[2];
+            }
+            const ranges = [maxR - minR, maxG - minG, maxB - minB];
+            let channel = 0;
+            if (ranges[1] > ranges[channel]) channel = 1;
+            if (ranges[2] > ranges[channel]) channel = 2;
+            return { ranges, channel, widest: ranges[channel] };
+        }
+
+        function averageColor(box) {
+            let r = 0; let g = 0; let b = 0;
+            for (const color of box) {
+                r += color[0]; g += color[1]; b += color[2];
+            }
+            const count = box.length === 0 ? 1 : box.length;
+            return [Math.round(r / count), Math.round(g / count), Math.round(b / count)];
+        }
+
+        /** Median cut: fold thousands of photo colours into at most `limit` representative ones. */
+        function quantizeColors(colors, limit) {
+            if (colors.length <= limit) return colors.slice();
+            const boxes = [colors.slice()];
+            while (boxes.length < limit) {
+                let index = -1;
+                let score = -1;
+                for (let i = 0; i < boxes.length; i += 1) {
+                    const box = boxes[i];
+                    if (box.length < 2) continue;
+                    const extent = boxExtent(box);
+                    const weight = extent.widest * Math.min(box.length, 256);
+                    if (weight > score) {
+                        score = weight;
+                        index = i;
+                    }
+                }
+                if (index === -1) break;
+                const box = boxes[index];
+                const channel = boxExtent(box).channel;
+                const sorted = box.slice().sort((a, b) => a[channel] - b[channel]);
+                const middle = Math.max(1, Math.floor(sorted.length / 2));
+                boxes.splice(index, 1, sorted.slice(0, middle), sorted.slice(middle));
+            }
+            return boxes.map(averageColor);
+        }
+
+        /** Most common opaque colours of a sampled image, as hex strings plus RGB triples. */
+        function paletteFromSample(sample, limit) {
+            const counts = new Map();
+            const total = sample.width * sample.height;
+            for (let i = 0; i < total; i += 1) {
+                if (sample.data[i * 4 + 3] < 128) continue;
+                const key = (sample.data[i * 4] << 16) | (sample.data[i * 4 + 1] << 8) | sample.data[i * 4 + 2];
+                counts.set(key, (counts.get(key) || 0) + 1);
+            }
+            const ordered = Array.from(counts.entries())
+                .sort((a, b) => b[1] - a[1])
+                .map(([key]) => [Number((key >> 16) & 255), Number((key >> 8) & 255), Number(key & 255)]);
+            const limited = ordered.length > limit ? quantizeColors(ordered, limit) : ordered;
+            const rgb = limited.map((color) => [color[0], color[1], color[2]]);
+            return {
+                palette: rgb.map(([r, g, b]) => `#${hex2(r)}${hex2(g)}${hex2(b)}`),
+                rgb,
+                original: ordered.length,
+            };
+        }
+
+        /** Maps sampled pixels onto the palette; optional Floyd–Steinberg dithering spreads the error. */
+        function buildImportRows(sample, paletteRgb, dither) {
+            const { width, height, data } = sample;
+            const work = new Float32Array(width * height * 3);
+            for (let i = 0; i < width * height; i += 1) {
+                work[i * 3] = data[i * 4];
+                work[i * 3 + 1] = data[i * 4 + 1];
+                work[i * 3 + 2] = data[i * 4 + 2];
+            }
+            const rows = [];
+            const spread = (x, y, error, dx, dy, weight) => {
+                const nx = x + dx;
+                const ny = y + dy;
+                if (nx < 0 || nx >= width || ny >= height) return;
+                const at = ny * width + nx;
+                if (data[at * 4 + 3] < 128) return;
+                work[at * 3] += error[0] * weight;
+                work[at * 3 + 1] += error[1] * weight;
+                work[at * 3 + 2] += error[2] * weight;
+            };
+            for (let y = 0; y < height; y += 1) {
+                let line = '';
+                for (let x = 0; x < width; x += 1) {
+                    const at = y * width + x;
+                    if (data[at * 4 + 3] < 128) {
+                        line += '.';
+                        continue;
+                    }
+                    const color = [work[at * 3], work[at * 3 + 1], work[at * 3 + 2]];
+                    const index = nearestColorIndex(paletteRgb, color);
+                    line += charFor(index);
+                    if (dither) {
+                        const chosen = paletteRgb[index];
+                        const error = [color[0] - chosen[0], color[1] - chosen[1], color[2] - chosen[2]];
+                        spread(x, y, error, 1, 0, 7 / 16);
+                        spread(x, y, error, -1, 1, 3 / 16);
+                        spread(x, y, error, 0, 1, 5 / 16);
+                        spread(x, y, error, 1, 1, 1 / 16);
+                    }
+                }
+                rows.push(line);
+            }
+            return rows;
+        }
+
+        /** PNG data URL of a char grid, shown as the import preview. */
+        function previewDataUrl(palette, rows) {
+            const height = rows.length;
+            const width = height > 0 ? rows[0].length : 0;
+            if (width === 0 || height === 0) return '';
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const context = canvas.getContext('2d');
+            if (!context) return '';
+            const image = context.createImageData(width, height);
+            const rgb = palette.map(hexToRgb);
+            for (let y = 0; y < height; y += 1) {
+                const row = rows[y];
+                for (let x = 0; x < width; x += 1) {
+                    const index = indexFor(row === undefined ? '.' : row[x]);
+                    const offset = (y * width + x) * 4;
+                    if (index < 0 || index >= rgb.length) {
+                        image.data[offset + 3] = 0;
+                        continue;
+                    }
+                    image.data[offset] = rgb[index][0];
+                    image.data[offset + 1] = rgb[index][1];
+                    image.data[offset + 2] = rgb[index][2];
+                    image.data[offset + 3] = 255;
+                }
+            }
+            context.putImageData(image, 0, 0);
+            return canvas.toDataURL('image/png');
+        }
+
+        /** Decoded pixels of a picked file, downscaled into the editor's size cap. */
+        async function readImagePixels(file) {
+            const url = window.URL.createObjectURL(file);
+            try {
+                const image = await new Promise((resolve, reject) => {
+                    const element = new window.Image();
+                    element.onload = () => resolve(element);
+                    element.onerror = () => reject(new Error('无法解码这张图片（试 PNG / JPG）'));
+                    element.src = url;
+                });
+                const sourceW = Math.max(1, Math.round(image.naturalWidth || image.width || 1));
+                const sourceH = Math.max(1, Math.round(image.naturalHeight || image.height || 1));
+                const ratio = Math.min(1, MAX_SIDE / Math.max(sourceW, sourceH));
+                const width = Math.max(1, Math.round(sourceW * ratio));
+                const height = Math.max(1, Math.round(sourceH * ratio));
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                const context = canvas.getContext('2d');
+                if (!context) throw new Error('浏览器不支持读取图片');
+                context.imageSmoothingEnabled = ratio < 1;
+                context.drawImage(image, 0, 0, width, height);
+                const data = context.getImageData(0, 0, width, height).data;
+                return { width, height, sourceW, sourceH, data };
+            } finally {
+                window.URL.revokeObjectURL(url);
+            }
+        }
+
+        function importName(file) {
+            const raw = file && typeof file.name === 'string' ? file.name : '';
+            const stem = raw.replace(/\.[^.]+$/, '').trim();
+            return (stem || '导入的图片').slice(0, 60);
+        }
+
+        /** Rebuilds palette + rows + preview for the current import options. */
+        function buildImportDocument(dialog, currentPalette) {
+            const sample = dialog.sample;
+            let palette;
+            let rgb;
+            let note = '';
+            if (dialog.mode === 'current' && Array.isArray(currentPalette) && currentPalette.length > 0) {
+                palette = currentPalette.slice(0, IMPORT_MAX_COLORS);
+                rgb = palette.map(hexToRgb).map(rgbOf);
+            } else if (dialog.mode === 'pico8') {
+                palette = PRESETS[0].colors.slice(0, IMPORT_MAX_COLORS);
+                rgb = palette.map(hexToRgb).map(rgbOf);
+            } else {
+                const auto = paletteFromSample(sample, IMPORT_MAX_COLORS);
+                palette = auto.palette;
+                rgb = auto.rgb;
+                note = auto.original > palette.length
+                    ? `${auto.original} 种颜色压到 ${palette.length} 种`
+                    : `${auto.original} 种颜色`;
+            }
+            if (palette.length === 0) {
+                palette = ['#000000'];
+                rgb = [[0, 0, 0]];
+            }
+            const rows = buildImportRows(sample, rgb, dialog.dither === true);
+            return {
+                ...dialog,
+                palette,
+                rows,
+                note,
+                preview: previewDataUrl(palette, rows),
+                error: '',
+            };
+        }
+
         /* ------------------------------------------------------------------ */
         /* icons                                                              */
         /* ------------------------------------------------------------------ */
@@ -374,6 +812,14 @@ window.__ModuleLoader__.load({
                     }),
                     h('path', { d: 'M13.2 10.4c1 1.2 1.5 2 1.5 2.6a1.5 1.5 0 0 1-3 0c0-.6.5-1.4 1.5-2.6z', fill: 'currentColor' }));
             }
+            if (name === 'select') {
+                return h('svg', common,
+                    h('rect', {
+                        x: 2.5, y: 2.5, width: 11, height: 11, rx: 1,
+                        fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeDasharray: '3 2',
+                    }),
+                    h('path', { d: 'M8 1.2v2.2M8 12.6v2.2M1.2 8h2.2M12.6 8h2.2', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round' }));
+            }
             return h('svg', common,
                 h('path', {
                     d: 'M9.9 2.6a3.4 3.4 0 1 0 3.5 3.4c0-.6-.2-1.2-.5-1.7l1.6-1.6-1.1-1.1-1.6 1.6a3.4 3.4 0 0 0-1.9-.6z',
@@ -538,6 +984,24 @@ window.__ModuleLoader__.load({
 .pxs-status { font-size: 11px; color: var(--dsw-alias-label-secondary, #9aa1ad); min-width: 54px; text-align: right; }
 .pxs-status[data-state="dirty"] { color: var(--dsw-alias-state-warn-primary, #e0a33a); }
 .pxs-status[data-state="error"] { color: var(--dsw-alias-state-error-primary, #e0574f); }
+.pxs-select-status {
+  min-width: 0; text-align: left; font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-brand-primary, #7aa2f7);
+}
+.pxs-selection-bar {
+  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  padding: 6px 8px; border-radius: 9px;
+  background: var(--dsw-alias-bg-overlay, rgba(38, 42, 51, .9));
+  border: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, .2));
+  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
+  backdrop-filter: blur(6px);
+}
+.pxs-selection-bar .pxs-btn { height: 24px; padding: 0 8px; font-size: 11px; }
+.pxs-selection-label {
+  font-size: 11px; margin-right: auto; color: var(--dsw-alias-label-secondary, #9aa1ad);
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
 .pxs-notice {
     font-size: 11px;
     color: var(--dsw-alias-state-success-primary, #3fa45b);
@@ -612,6 +1076,42 @@ window.__ModuleLoader__.load({
 }
 .pxs-size-label { font-size: 12px; font-weight: 600; }
 .pxs-size-hint { font-size: 10px; color: var(--dsw-alias-label-secondary, #9aa3b2); }
+.pxs-import-dialog, .pxs-resize-dialog { width: min(460px, calc(100vw - 40px)); }
+.pxs-scale-chip {
+    flex-direction: row; align-items: center; gap: 0; padding: 3px 8px; border-radius: 999px;
+    font-size: 11px; color: var(--dsw-alias-label-primary, #e8ebf2);
+    background: var(--dsw-alias-bg-layer-1, #1c1f26);
+    border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, .1));
+}
+.pxs-scale-chip:hover { border-color: var(--dsw-alias-border-l2, rgba(255, 255, 255, .2)); }
+.pxs-scale-chip[data-active="true"] {
+    border-color: var(--dsw-alias-brand-primary, #4b7bec);
+    background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4b7bec) 18%, transparent);
+}
+.pxs-scale-chip:disabled { opacity: .45; cursor: not-allowed; }
+.pxs-import-preview {
+    display: flex; justify-content: center; padding: 8px; border-radius: 8px;
+    background: var(--dsw-alias-bg-layer-1, #1c1f26);
+    border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, .08));
+    max-height: 190px; overflow: auto;
+}
+.pxs-import-preview img {
+    image-rendering: pixelated; max-width: 100%; max-height: 172px;
+}
+.pxs-anchor-grid {
+    display: grid; grid-template-columns: repeat(3, 30px); gap: 3px;
+}
+.pxs-anchor-chip {
+    width: 30px; height: 26px; border-radius: 6px; cursor: pointer; font: inherit;
+    line-height: 1; color: var(--dsw-alias-label-primary, #e8ebf2);
+    background: var(--dsw-alias-bg-layer-1, #1c1f26);
+    border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, .1));
+}
+.pxs-anchor-chip:hover { border-color: var(--dsw-alias-border-l2, rgba(255, 255, 255, .24)); }
+.pxs-anchor-chip[data-active="true"] {
+    border-color: var(--dsw-alias-brand-primary, #4b7bec);
+    background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4b7bec) 18%, transparent);
+}
 .pxs-menu {
   position: fixed; z-index: 40; min-width: 132px; padding: 4px; border-radius: 8px;
   background: var(--dsw-alias-bg-overlay, #262a33); border: 1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.2));
@@ -665,6 +1165,11 @@ window.__ModuleLoader__.load({
             const [renameValue, setRenameValue] = useState('');
             const [saveDialog, setSaveDialog] = useState(null);
             const [editing, setEditing] = useState(null);
+            const [importDialog, setImportDialog] = useState(null);
+            const [resizeDialog, setResizeDialog] = useState(null);
+            const [selection, setSelection] = useState(null);
+            const [grabMode, setGrabMode] = useState(false);
+            const [allLayersMode, setAllLayersMode] = useState(false);
 
             const stageRef = useRef(null);
             const canvasRef = useRef(null);
@@ -695,10 +1200,22 @@ window.__ModuleLoader__.load({
             // Indirection for the save-as action: the keyboard effect is registered
             // before the callback is created, so it must not close over the binding.
             const saveAsRef = useRef(null);
+            const fileRef = useRef(null);
+            /** Live rectangle, read by the pointer handlers and the paint loop. */
+            const selectionRef = useRef(null);
+            /** In-flight selection drag: { mode, pointerId, start, origin }. */
+            const selectDragRef = useRef(null);
+            /** Indirection for the keyboard effect, which is registered before these callbacks exist. */
+            const selectApiRef = useRef({});
+            const grabRef = useRef(false);
+            const allLayersRef = useRef(false);
 
             if (gridRef.current !== showGrid) gridRef.current = showGrid;
             sizeRef.current = { left: leftWidth, right: rightWidth };
             if (editingRef.current !== editing) editingRef.current = editing;
+            if (grabRef.current !== grabMode) grabRef.current = grabMode;
+            if (allLayersRef.current !== allLayersMode) allLayersRef.current = allLayersMode;
+            selectionRef.current = selection;
 
             docRef.current = doc;
             toolRef.current = tool;
@@ -832,10 +1349,47 @@ window.__ModuleLoader__.load({
                     context.restore();
                 }
 
+                if (selection) {
+                    const boxX = Math.round(pan.x + selection.x * scale);
+                    const boxY = Math.round(pan.y + selection.y * scale);
+                    const boxW = Math.max(1, Math.round(selection.w * scale));
+                    const boxH = Math.max(1, Math.round(selection.h * scale));
+                    const floating = selection.float;
+                    if (floating && floating.region) {
+                        // Floating content preview, drawn over the cells it was lifted from.
+                        for (let row = 0; row < floating.region.length; row += 1) {
+                            const line = floating.region[row];
+                            for (let column = 0; column < line.length; column += 1) {
+                                const ch = line[column];
+                                if (!ch || ch === '.') continue;
+                                const color = current.palette[indexFor(ch)];
+                                if (!color) continue;
+                                context.fillStyle = color;
+                                context.fillRect(
+                                    Math.round(pan.x + (selection.x + column) * scale),
+                                    Math.round(pan.y + (selection.y + row) * scale),
+                                    Math.ceil(scale),
+                                    Math.ceil(scale),
+                                );
+                            }
+                        }
+                    }
+                    // Marching ants: one dark and one offset light dashed border.
+                    context.save();
+                    context.lineWidth = 1;
+                    context.setLineDash([4, 4]);
+                    context.strokeStyle = 'rgba(0,0,0,0.8)';
+                    context.strokeRect(boxX + 0.5, boxY + 0.5, boxW - 1, boxH - 1);
+                    context.lineDashOffset = 4;
+                    context.strokeStyle = 'rgba(255,255,255,0.95)';
+                    context.strokeRect(boxX + 0.5, boxY + 0.5, boxW - 1, boxH - 1);
+                    context.restore();
+                }
+
                 context.strokeStyle = 'rgba(255,255,255,0.22)';
                 context.lineWidth = 1;
                 context.strokeRect(Math.round(pan.x) + 0.5, Math.round(pan.y) + 0.5, Math.round(docWidth), Math.round(docHeight));
-            }, [composeImage]);
+            }, [composeImage, selection]);
 
             const requestPaint = useCallback(() => {
                 if (frameRef.current !== 0) return;
@@ -947,10 +1501,7 @@ window.__ModuleLoader__.load({
                 if (!current) return;
                 const history = historyRef.current;
                 if (options.snapshot !== false) {
-                    history.undo.push({
-                        palette: current.palette.slice(),
-                        layers: current.layers.map((layer) => ({ ...layer, rows: layer.rows.slice() })),
-                    });
+                    history.undo.push(snapshotOf(current));
                     if (history.undo.length > HISTORY_LIMIT) history.undo.shift();
                     history.redo = [];
                 }
@@ -972,6 +1523,10 @@ window.__ModuleLoader__.load({
                     palette: snapshot.palette.slice(),
                     layers: snapshot.layers.map((layer) => ({ ...layer, rows: layer.rows.slice() })),
                 };
+                if (typeof snapshot.w === 'number' && typeof snapshot.h === 'number') {
+                    next.w = snapshot.w;
+                    next.h = snapshot.h;
+                }
                 docRef.current = next;
                 setDoc(next);
                 if (!next.layers[layerRef.current]) {
@@ -988,10 +1543,7 @@ window.__ModuleLoader__.load({
                 const snapshot = history.undo.pop();
                 if (!snapshot) return;
                 const current = docRef.current;
-                history.redo.push({
-                    palette: current.palette.slice(),
-                    layers: current.layers.map((layer) => ({ ...layer, rows: layer.rows.slice() })),
-                });
+                history.redo.push(snapshotOf(current));
                 applyHistory(snapshot);
             }, [applyHistory]);
 
@@ -1000,10 +1552,7 @@ window.__ModuleLoader__.load({
                 const snapshot = history.redo.pop();
                 if (!snapshot) return;
                 const current = docRef.current;
-                history.undo.push({
-                    palette: current.palette.slice(),
-                    layers: current.layers.map((layer) => ({ ...layer, rows: layer.rows.slice() })),
-                });
+                history.undo.push(snapshotOf(current));
                 applyHistory(snapshot);
             }, [applyHistory]);
 
@@ -1067,6 +1616,170 @@ window.__ModuleLoader__.load({
                 }
             }, []);
 
+            const pushHistory = useCallback(() => {
+                const current = docRef.current;
+                if (!current) return;
+                const history = historyRef.current;
+                history.undo.push(snapshotOf(current));
+                if (history.undo.length > HISTORY_LIMIT) history.undo.shift();
+                history.redo = [];
+            }, []);
+
+            const selectionTargets = useCallback((allLayers) => {
+                const current = docRef.current;
+                if (!current) return [];
+                if (allLayers) {
+                    return current.layers
+                        .map((layer, index) => ({ layer, index }))
+                        .filter((entry) => entry.layer && entry.layer.visible !== false);
+                }
+                const layer = current.layers[layerRef.current];
+                return layer ? [{ layer, index: layerRef.current }] : [];
+            }, []);
+
+            const setSelectionRect = useCallback((rect) => {
+                selectionRef.current = rect;
+                setSelection(rect);
+            }, []);
+
+            const selectAll = useCallback(() => {
+                const current = docRef.current;
+                if (!current) return;
+                setTool('select');
+                setSelectionRect({ x: 0, y: 0, w: current.w, h: current.h, float: null });
+                setStatus('select');
+                requestPaint();
+            }, [requestPaint, setSelectionRect]);
+
+            const putBackLifted = useCallback((current, active) => {
+                const float = active.float;
+                if (!float) return current;
+                const layers = current.layers.map((layer, index) => {
+                    const item = float.targets.find((entry) => entry.index === index);
+                    if (!item) return layer;
+                    return {
+                        ...layer,
+                        rows: writeRegion(layer.rows, item.region, float.origin.x, float.origin.y),
+                    };
+                });
+                return { ...current, layers };
+            }, []);
+
+            const cancelSelection = useCallback(() => {
+                const current = docRef.current;
+                const active = selectionRef.current;
+                selectionRef.current = null;
+                setSelection(null);
+                if (current && active && active.float) {
+                    const next = putBackLifted(current, active);
+                    docRef.current = next;
+                    setDoc(next);
+                    scheduleSave();
+                }
+                requestPaint();
+            }, [putBackLifted, requestPaint, scheduleSave]);
+
+            /** Lifts the selected pixels out of their layers; false when nothing could be lifted. */
+            const liftSelection = useCallback((allLayers) => {
+                const current = docRef.current;
+                const active = selectionRef.current;
+                if (!current || !active || active.float) return false;
+                const rect = clampRectangle(active, current.w, current.h);
+                const targets = selectionTargets(allLayers);
+                if (targets.length === 0) return false;
+                pushHistory();
+                const items = targets.map((entry) => ({ index: entry.index, region: readRegion(entry.layer.rows, rect) }));
+                const layers = current.layers.map((layer, index) => {
+                    const item = items.find((entry) => entry.index === index);
+                    return item ? { ...layer, rows: emptyRows(layer.rows, rect) } : layer;
+                });
+                const next = { ...current, layers };
+                docRef.current = next;
+                setDoc(next);
+                setSelectionRect({
+                    ...rect,
+                    float: {
+                        region: mergedRegion(current.layers, rect),
+                        origin: { x: rect.x, y: rect.y },
+                        targets: items,
+                    },
+                });
+                setStatus('dirty');
+                return true;
+            }, [pushHistory, selectionTargets, setSelectionRect]);
+
+            /** Drops the lifted pixels at the rectangle's current position. */
+            const dropSelection = useCallback(() => {
+                const current = docRef.current;
+                const active = selectionRef.current;
+                if (!current || !active || !active.float) return;
+                const rect = clampRectangle(active, current.w, current.h);
+                const float = active.float;
+                const layers = current.layers.map((layer, index) => {
+                    const item = float.targets.find((entry) => entry.index === index);
+                    return item ? { ...layer, rows: writeRegion(layer.rows, item.region, rect.x, rect.y) } : layer;
+                });
+                const next = { ...current, layers };
+                docRef.current = next;
+                setDoc(next);
+                setSelectionRect({ ...rect, float: null });
+                setStatus('dirty');
+                scheduleSave();
+            }, [scheduleSave, setSelectionRect]);
+
+            const applySelectionEdit = useCallback((mode, allLayers) => {
+                const current = docRef.current;
+                const active = selectionRef.current;
+                if (!current || !active) return;
+                if (active.float) {
+                    const restored = putBackLifted(current, active);
+                    docRef.current = restored;
+                    setDoc(restored);
+                }
+                const base = docRef.current;
+                const rect = clampRectangle(active, base.w, base.h);
+                const targets = selectionTargets(allLayers);
+                if (targets.length === 0) return;
+                pushHistory();
+                const layers = base.layers.map((layer, index) => {
+                    const target = targets.find((entry) => entry.index === index);
+                    if (!target) return layer;
+                    let rows = layer.rows;
+                    if (mode === 'mirror-h') rows = mirrorRows(rows, rect, true);
+                    else if (mode === 'mirror-v') rows = mirrorRows(rows, rect, false);
+                    else if (mode === 'fill') rows = fillRows(rows, rect, charFor(colorRef.current));
+                    else if (mode === 'delete') rows = emptyRows(rows, rect);
+                    return { ...layer, rows };
+                });
+                const next = { ...base, layers };
+                docRef.current = next;
+                setDoc(next);
+                setSelectionRect({ ...rect, float: null });
+                setStatus('dirty');
+                scheduleSave();
+            }, [putBackLifted, pushHistory, scheduleSave, selectionTargets, setSelectionRect]);
+
+            /** Arrow-key nudging: 1 cell, 10 with Shift; carries lifted pixels along. */
+            const nudgeSelection = useCallback((dx, dy) => {
+                const current = docRef.current;
+                const active = selectionRef.current;
+                if (!current || !active) return;
+                const rect = moveRectangle(active, active.x + dx, active.y + dy, current.w, current.h);
+                setSelectionRect({ ...rect, float: active.float });
+                setStatus('select');
+            }, [setSelectionRect]);
+
+            // Exposed to the keyboard effect, which is registered before these callbacks exist.
+            selectApiRef.current = {
+                selectAll,
+                cancel: cancelSelection,
+                apply: applySelectionEdit,
+                nudge: nudgeSelection,
+                drop: dropSelection,
+                lift: liftSelection,
+                allLayers: allLayersRef.current,
+            };
+
             const onPointerDown = useCallback((event) => {
                 if (!docRef.current) return;
                 const wantsPan = event.button === 1 || spaceRef.current || event.altKey;
@@ -1087,6 +1800,47 @@ window.__ModuleLoader__.load({
                 if (!cell) return;
                 const current = docRef.current;
 
+                if (toolRef.current === 'select') {
+                    event.preventDefault();
+                    const anchor = {
+                        x: clamp(cell.x, 0, Math.max(0, current.w - 1)),
+                        y: clamp(cell.y, 0, Math.max(0, current.h - 1)),
+                    };
+                    const active = selectionRef.current;
+                    const inside = active ? pointInRectangle(active, cell) : false;
+                    const carry = event.shiftKey || grabRef.current;
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    if (inside && carry && (active.float || liftSelection(event.altKey))) {
+                        selectDragRef.current = {
+                            mode: 'grab',
+                            pointerId: event.pointerId,
+                            start: anchor,
+                            origin: { x: active.x, y: active.y },
+                        };
+                    } else if (inside) {
+                        // Plain drag slides the frame; the pixels stay where they are.
+                        selectDragRef.current = {
+                            mode: 'move',
+                            pointerId: event.pointerId,
+                            start: anchor,
+                            origin: { x: active.x, y: active.y },
+                        };
+                    } else {
+                        setSelectionRect({
+                            ...clampRectangle({ x: anchor.x, y: anchor.y, w: 1, h: 1 }, current.w, current.h),
+                            float: null,
+                        });
+                        selectDragRef.current = {
+                            mode: 'create',
+                            pointerId: event.pointerId,
+                            start: anchor,
+                        };
+                    }
+                    setStatus('select');
+                    requestPaint();
+                    return;
+                }
+
                 if (toolRef.current === 'picker') {
                     pickColorAt(cell);
                     return;
@@ -1107,10 +1861,7 @@ window.__ModuleLoader__.load({
 
                 // Real stroke: snapshot once, then paint continuously.
                 const history = historyRef.current;
-                history.undo.push({
-                    palette: current.palette.slice(),
-                    layers: current.layers.map((layer) => ({ ...layer, rows: layer.rows.slice() })),
-                });
+                history.undo.push(snapshotOf(current));
                 if (history.undo.length > HISTORY_LIMIT) history.undo.shift();
                 history.redo = [];
                 strokeRef.current = { pointerId: event.pointerId, last: cell };
@@ -1128,6 +1879,35 @@ window.__ModuleLoader__.load({
                     requestPaint();
                     return;
                 }
+                const selectDrag = selectDragRef.current;
+                if (selectDrag && selectDrag.pointerId === event.pointerId) {
+                    const current = docRef.current;
+                    const cell = cellFromEvent(event);
+                    if (!current || !cell) return;
+                    const anchor = {
+                        x: clamp(cell.x, 0, Math.max(0, current.w - 1)),
+                        y: clamp(cell.y, 0, Math.max(0, current.h - 1)),
+                    };
+                    if (selectDrag.mode === 'create') {
+                        setSelectionRect({
+                            ...clampRectangle(selectionBetween(selectDrag.start, anchor), current.w, current.h),
+                            float: null,
+                        });
+                    } else {
+                        const active = selectionRef.current;
+                        if (!active) return;
+                        const rect = moveRectangle(
+                            { x: 0, y: 0, w: active.w, h: active.h },
+                            selectDrag.origin.x + (anchor.x - selectDrag.start.x),
+                            selectDrag.origin.y + (anchor.y - selectDrag.start.y),
+                            current.w,
+                            current.h,
+                        );
+                        setSelectionRect({ ...rect, float: active.float });
+                    }
+                    requestPaint();
+                    return;
+                }
                 const stroke = strokeRef.current;
                 if (!stroke || stroke.pointerId !== event.pointerId) return;
                 const cell = cellFromEvent(event);
@@ -1138,6 +1918,18 @@ window.__ModuleLoader__.load({
             }, [cellFromEvent, requestPaint, strokeAt]);
 
             const onPointerUp = useCallback((event) => {
+                const selectDrag = selectDragRef.current;
+                if (selectDrag && selectDrag.pointerId === event.pointerId) {
+                    selectDragRef.current = null;
+                    if (selectDrag.mode === 'grab') dropSelection();
+                    const active = selectionRef.current;
+                    if (active && (active.w < 1 || active.h < 1)) {
+                        selectionRef.current = null;
+                        setSelection(null);
+                    }
+                    requestPaint();
+                    return;
+                }
                 if (panDrawRef.current && panDrawRef.current.pointerId === event.pointerId) {
                     panDrawRef.current = null;
                     requestPaint();
@@ -1210,6 +2002,11 @@ window.__ModuleLoader__.load({
                         return;
                     }
                     const meta = event.metaKey || event.ctrlKey;
+                    if (meta && event.key.toLowerCase() === 'a') {
+                        event.preventDefault();
+                        selectApiRef.current.selectAll();
+                        return;
+                    }
                     if (meta && event.key.toLowerCase() === 'z') {
                         event.preventDefault();
                         if (event.shiftKey) redo();
@@ -1233,10 +2030,45 @@ window.__ModuleLoader__.load({
                     }
                     if (meta) return;
                     const key = event.key.toLowerCase();
+                    if (key === 'escape') {
+                        selectApiRef.current.cancel();
+                        return;
+                    }
+                    if (selectionRef.current) {
+                        if (key === 'delete' || key === 'backspace') {
+                            event.preventDefault();
+                            selectApiRef.current.apply('delete', selectApiRef.current.allLayers);
+                            return;
+                        }
+                        if (key.indexOf('arrow') === 0) {
+                            event.preventDefault();
+                            const step = event.shiftKey ? 10 : 1;
+                            const dx = key === 'arrowleft' ? -step : key === 'arrowright' ? step : 0;
+                            const dy = key === 'arrowup' ? -step : key === 'arrowdown' ? step : 0;
+                            selectApiRef.current.nudge(dx, dy);
+                            return;
+                        }
+                        if (event.shiftKey && key === 'h') {
+                            event.preventDefault();
+                            selectApiRef.current.apply('mirror-h', selectApiRef.current.allLayers);
+                            return;
+                        }
+                        if (event.shiftKey && key === 'v') {
+                            event.preventDefault();
+                            selectApiRef.current.apply('mirror-v', selectApiRef.current.allLayers);
+                            return;
+                        }
+                        if (event.shiftKey && key === 'f') {
+                            event.preventDefault();
+                            selectApiRef.current.apply('fill', selectApiRef.current.allLayers);
+                            return;
+                        }
+                    }
                     if (key === 'b') setTool('pencil');
                     else if (key === 'e') setTool('eraser');
                     else if (key === 'g') setTool('bucket');
                     else if (key === 'i') setTool('picker');
+                    else if (key === 'm') setTool('select');
                     else if (key === 'f') fitToView();
                     else if (key === 'h') {
                         const next = !gridRef.current;
@@ -1410,6 +2242,7 @@ window.__ModuleLoader__.load({
                     root: '',
                     dirs: [],
                     name,
+                    scale: clampExportScale(readStoredNumber('pxs:exportScale', 1), current.w, current.h),
                     loading: true,
                     busy: false,
                     error: '',
@@ -1423,15 +2256,17 @@ window.__ModuleLoader__.load({
                 if (!current || !dialog || dialog.busy) return;
                 if (typeof dialog.path !== 'string' || dialog.path === '') return;
                 const target = joinPath(dialog.path, ensurePngName(dialog.name));
+                const scale = clampExportScale(dialog.scale, current.w, current.h);
                 setSaveDialog((value) => (value ? { ...value, busy: true, error: '' } : value));
                 try {
-                    const saved = await callApi({ op: 'exportTo', doc: current, path: target });
+                    const saved = await callApi({ op: 'exportTo', doc: current, path: target, scale });
                     const next = { ...current, filePath: typeof saved.path === 'string' ? saved.path : target };
                     docRef.current = next;
                     setDoc(next);
                     setSaveDialog(null);
                     setError('');
-                    setNotice(`已保存 ${next.filePath}`);
+                    storeValue('pxs:exportScale', String(scale));
+                    setNotice(`已保存 ${next.filePath}${scale > 1 ? `（${scale}×）` : ''}`);
                     const stored = await callApi({ op: 'save', doc: next });
                     if (stored && stored.doc) {
                         docRef.current = stored.doc;
@@ -1455,8 +2290,10 @@ window.__ModuleLoader__.load({
                     return;
                 }
                 try {
-                    const saved = await callApi({ op: 'exportTo', doc: current, path: filePath });
-                    setNotice(saved.overwritten ? `已覆盖 ${saved.path}` : `已保存 ${saved.path}`);
+                    const scale = clampExportScale(readStoredNumber('pxs:exportScale', 1), current.w, current.h);
+                    const saved = await callApi({ op: 'exportTo', doc: current, path: filePath, scale });
+                    const suffix = scale > 1 ? `（${scale}×）` : '';
+                    setNotice(`${saved.overwritten ? `已覆盖 ${saved.path}` : `已保存 ${saved.path}`}${suffix}`);
                     setError('');
                 } catch (cause) {
                     const message = cause instanceof Error ? cause.message : String(cause);
@@ -1472,20 +2309,130 @@ window.__ModuleLoader__.load({
             saveAsRef.current = saveAsPng;
 
             /* -------------------------------------------------------------- */
-            /* palette actions                                                */
+            /* import a picture                                               */
             /* -------------------------------------------------------------- */
 
-            const pushHistory = useCallback(() => {
+            const openImportDialog = useCallback((file) => {
+                if (!file) return;
+                void (async () => {
+                    try {
+                        const sample = await readImagePixels(file);
+                        const current = docRef.current;
+                        setError('');
+                        setImportDialog(buildImportDocument({
+                            sample,
+                            name: importName(file),
+                            mode: 'auto',
+                            dither: false,
+                            sourceW: sample.sourceW,
+                            sourceH: sample.sourceH,
+                            width: sample.width,
+                            height: sample.height,
+                            busy: false,
+                        }, current ? current.palette : null));
+                    } catch (cause) {
+                        setError(cause instanceof Error ? cause.message : String(cause));
+                    }
+                })();
+            }, []);
+
+            const retuneImport = useCallback((patch) => {
+                const current = docRef.current;
+                setImportDialog((value) => (value
+                    ? buildImportDocument({ ...value, ...patch }, current ? current.palette : null)
+                    : value));
+            }, []);
+
+            const confirmImport = useCallback(() => {
+                const dialog = importDialog;
+                if (!dialog || dialog.busy || !Array.isArray(dialog.rows)) return;
+                setImportDialog((value) => (value ? { ...value, busy: true, error: '' } : value));
+                void (async () => {
+                    try {
+                        const width = dialog.width;
+                        const height = dialog.height;
+                        const name = String(dialog.name || '').trim().slice(0, 60) || `${width}×${height} 导入`;
+                        const created = await callApi({ op: 'create', name, w: width, h: height, palette: dialog.palette });
+                        // create ignores layers, so the pixel grid goes in through save.
+                        const saved = await callApi({
+                            op: 'save',
+                            doc: {
+                                ...created.doc,
+                                layers: [{ name: '图层 1', visible: true, rows: dialog.rows }],
+                            },
+                        });
+                        const next = saved && saved.doc ? saved.doc : created.doc;
+                        docRef.current = next;
+                        setDoc(next);
+                        layerRef.current = 0;
+                        setLayerIndex(0);
+                        setColorIndex(0);
+                        editSessionRef.current = null;
+                        setEditing(null);
+                        historyRef.current = { undo: [], redo: [] };
+                        setImportDialog(null);
+                        setStatus('clean');
+                        setNotice(`已导入「${name}」${width}×${height}`);
+                        await refreshDocs();
+                        window.requestAnimationFrame(() => fitToView());
+                    } catch (cause) {
+                        const message = cause instanceof Error ? cause.message : String(cause);
+                        setImportDialog((value) => (value ? { ...value, busy: false, error: message } : value));
+                    }
+                })();
+            }, [fitToView, importDialog, refreshDocs]);
+
+            /* -------------------------------------------------------------- */
+            /* canvas size / crop                                             */
+            /* -------------------------------------------------------------- */
+
+            const openResizeDialog = useCallback(() => {
                 const current = docRef.current;
                 if (!current) return;
+                setResizeDialog({ w: current.w, h: current.h, anchor: 'c', error: '' });
+            }, []);
+
+            const confirmResize = useCallback(() => {
+                const current = docRef.current;
+                const dialog = resizeDialog;
+                if (!current || !dialog) return;
+                const width = Math.round(Number(dialog.w));
+                const height = Math.round(Number(dialog.h));
+                if (!Number.isFinite(width) || !Number.isFinite(height) || width < 1 || height < 1) {
+                    setResizeDialog({ ...dialog, error: '宽高要填 1 以上的整数' });
+                    return;
+                }
+                if (width > MAX_SIDE || height > MAX_SIDE) {
+                    setResizeDialog({ ...dialog, error: `最大 ${MAX_SIDE}×${MAX_SIDE}` });
+                    return;
+                }
+                setResizeDialog(null);
+                if (width === current.w && height === current.h) {
+                    setNotice('画布尺寸没有变化');
+                    return;
+                }
                 const history = historyRef.current;
-                history.undo.push({
-                    palette: current.palette.slice(),
-                    layers: current.layers.map((layer) => ({ ...layer, rows: layer.rows.slice() })),
-                });
+                history.undo.push(snapshotOf(current));
                 if (history.undo.length > HISTORY_LIMIT) history.undo.shift();
                 history.redo = [];
-            }, []);
+                const layers = current.layers.map((layer) => ({
+                    ...layer,
+                    rows: resizeRows(layer.rows, current.w, current.h, width, height, dialog.anchor),
+                }));
+                const next = { ...current, w: width, h: height, layers };
+                docRef.current = next;
+                setDoc(next);
+                scheduleSave();
+                setNotice(`画布已调整为 ${width}×${height}`);
+                window.requestAnimationFrame(() => {
+                    fitToView();
+                    requestPaint();
+                });
+            }, [fitToView, requestPaint, resizeDialog, scheduleSave]);
+
+            /* -------------------------------------------------------------- */
+            /* palette actions                                                */
+            /* -------------------------------------------------------------- */
 
             const updatePalette = useCallback((palette, options = {}) => {
                 const current = docRef.current;
@@ -1691,10 +2638,7 @@ window.__ModuleLoader__.load({
                 const current = docRef.current;
                 if (!current) return null;
                 const history = historyRef.current;
-                history.undo.push({
-                    palette: current.palette.slice(),
-                    layers: current.layers.map((layer) => ({ ...layer, rows: layer.rows.slice() })),
-                });
+                history.undo.push(snapshotOf(current));
                 if (history.undo.length > HISTORY_LIMIT) history.undo.shift();
                 history.redo = [];
                 return current;
@@ -1896,6 +2840,10 @@ window.__ModuleLoader__.load({
                     : status === 'error' ? '保存失败'
                         : '已保存';
 
+            const selectionText = selection
+                ? `选区 ${selection.w}×${selection.h} @ (${selection.x},${selection.y})${selection.float ? ' · 浮动' : ''}${allLayersMode ? ' · 全部图层' : ''}`
+                : '';
+
             const currentLayer = doc ? doc.layers[layerIndex] : null;
 
             const swatchNodes = doc ? doc.palette.map((color, index) => h('button', {
@@ -1949,6 +2897,31 @@ window.__ModuleLoader__.load({
                     onClick: openNewDialog,
                     title: '新建作品（可选名字与尺寸）',
                 }, '新建'),
+                h('button', {
+                    className: 'pxs-btn',
+                    onClick: () => {
+                        if (fileRef.current) fileRef.current.click();
+                    },
+                    title: '打开图片，转成像素画导入新作品',
+                }, '打开图片'),
+                h('input', {
+                    ref: fileRef,
+                    type: 'file',
+                    accept: 'image/png,image/jpeg,image/gif,image/webp,image/bmp',
+                    style: { display: 'none' },
+                    onChange: (event) => {
+                        const input = event.target;
+                        const picked = input.files && input.files[0];
+                        input.value = '';
+                        if (picked) openImportDialog(picked);
+                    },
+                }),
+                h('button', {
+                    className: 'pxs-btn',
+                    disabled: !doc,
+                    onClick: openResizeDialog,
+                    title: '调整画布尺寸 / 裁剪（可撤销）',
+                }, '尺寸'),
                 h('span', { className: 'pxs-spacer' }),
                 h('button', {
                     className: 'pxs-btn pxs-btn-icon',
@@ -2019,6 +2992,7 @@ window.__ModuleLoader__.load({
                     title: '删除当前作品',
                 }, '删除'),
                 h('span', { className: 'pxs-status', 'data-state': status }, statusText),
+                selection ? h('span', { className: 'pxs-status pxs-select-status', title: '选区：拖动移框，Shift+拖动带内容，方向键微调，Esc 取消' }, selectionText) : null,
                 notice ? h('span', { className: 'pxs-notice', title: notice }, notice) : null);
 
             const errorNode = error ? h('div', { className: 'pxs-error' },
@@ -2160,7 +3134,10 @@ window.__ModuleLoader__.load({
                     h('div', null, h('kbd', null, 'G'), '填充  ', h('kbd', null, 'I'), '吸管'),
                     h('div', null, h('kbd', null, '滚轮'), '缩放  ', h('kbd', null, '空格'), '+ 拖动'),
                     h('div', null, h('kbd', null, 'F'), '适应窗口  ', h('kbd', null, '[ ]'), '笔刷'),
-                    h('div', null, h('kbd', null, 'H'), '格线开/关  ', h('kbd', null, 'Ctrl+S'), '保存')));
+                    h('div', null, h('kbd', null, 'H'), '格线开/关  ', h('kbd', null, 'Ctrl+S'), '保存'),
+                    h('div', null, h('kbd', null, 'M'), '选区  ', h('kbd', null, 'Ctrl+A'), '全选'),
+                    h('div', null, h('kbd', null, 'Shift'), '+ 拖动', ' 移内容'),
+                    h('div', null, h('kbd', null, 'Del'), '删除  ', h('kbd', null, 'Esc'), '取消')));
 
             const leftPanel = h('div', { className: 'pxs-panel pxs-panel-left' },
                 toolsSection, brushSection, layerSection, canvasSection, keysSection);
@@ -2172,7 +3149,10 @@ window.__ModuleLoader__.load({
                 onPointerMove,
                 onPointerUp,
                 onPointerCancel: onPointerUp,
-                onContextMenu: (event) => event.preventDefault(),
+                onContextMenu: (event) => {
+                    event.preventDefault();
+                    if (selectionRef.current) selectApiRef.current.cancel();
+                },
                 onDragStart: (event) => event.preventDefault(),
             });
 
@@ -2188,8 +3168,49 @@ window.__ModuleLoader__.load({
 
             const loadingNode = loading ? h('div', { className: 'pxs-empty' }, h('p', null, '加载作品中…')) : null;
 
+            const selectionBar = selection ? h('div', { className: 'pxs-selection-bar' },
+                h('span', { className: 'pxs-selection-label' },
+                    `${selection.w}×${selection.h} @ ${selection.x},${selection.y}`),
+                h('button', {
+                    className: 'pxs-btn',
+                    onClick: () => selectApiRef.current.apply('mirror-h', allLayersRef.current),
+                    title: '水平镜像 (Shift+H)',
+                }, '⇆ 水平镜像'),
+                h('button', {
+                    className: 'pxs-btn',
+                    onClick: () => selectApiRef.current.apply('mirror-v', allLayersRef.current),
+                    title: '垂直镜像 (Shift+V)',
+                }, '⇅ 垂直镜像'),
+                h('button', {
+                    className: 'pxs-btn',
+                    onClick: () => selectApiRef.current.apply('fill', allLayersRef.current),
+                    title: '用当前颜色填充 (Shift+F)',
+                }, '▣ 填充'),
+                h('button', {
+                    className: 'pxs-btn',
+                    onClick: () => selectApiRef.current.apply('delete', allLayersRef.current),
+                    title: '删除选区内容 (Delete)',
+                }, '⌫ 删除'),
+                h('button', {
+                    className: 'pxs-btn',
+                    'data-active': grabMode,
+                    title: '抓着像素拖动（也可以 Shift+拖动）',
+                    onClick: () => setGrabMode((value) => !value),
+                }, grabMode ? '✱ 抓着：开' : '✱ 抓着像素'),
+                h('button', {
+                    className: 'pxs-btn',
+                    'data-active': allLayersMode,
+                    title: '镜像 / 填充 / 删除作用于所有可见图层（也可以按住 Alt）',
+                    onClick: () => setAllLayersMode((value) => !value),
+                }, allLayersMode ? '多层：开' : '多层'),
+                h('button', {
+                    className: 'pxs-btn',
+                    onClick: () => selectApiRef.current.cancel(),
+                    title: '取消选区 (Esc)',
+                }, '✕')) : null;
+
             const stageNode = h('div', { className: 'pxs-stage', ref: stageRef },
-                canvasNode, emptyNode, loadingNode);
+                canvasNode, emptyNode, loadingNode, selectionBar);
 
             const colorSection = h('div', { className: 'pxs-section' },
                 h('p', { className: 'pxs-title' }, '当前颜色'),
@@ -2396,6 +3417,25 @@ window.__ModuleLoader__.load({
                             }
                         },
                     })),
+                h('div', { className: 'pxs-dialog-row', style: { flexWrap: 'wrap' } },
+                    h('span', { className: 'pxs-dialog-label' }, '倍率'),
+                    EXPORT_SCALES.map((value) => {
+                        const ceiling = maxScaleFor(doc ? doc.w : 1, doc ? doc.h : 1);
+                        const allowed = value <= ceiling;
+                        return h('button', {
+                            key: value,
+                            className: 'pxs-scale-chip',
+                            'data-active': Number(saveDialog.scale) === value ? 'true' : 'false',
+                            disabled: !allowed,
+                            title: allowed
+                                ? `${value}× → ${(doc ? doc.w : 0) * value}×${(doc ? doc.h : 0) * value}`
+                                : '超出单张 PNG 上限',
+                            onClick: () => setSaveDialog((current) => (current ? { ...current, scale: value } : current)),
+                        }, `${value}×`);
+                    }),
+                    h('span', { className: 'pxs-hint' }, doc
+                        ? `${saveDialog.scale}× = ${doc.w * saveDialog.scale}×${doc.h * saveDialog.scale}`
+                        : '')),
                 saveDialog.error ? h('div', { className: 'pxs-dialog-error' }, saveDialog.error) : null,
                 h('div', { className: 'pxs-dialog-actions' },
                     h('button', { className: 'pxs-btn', onClick: () => setSaveDialog(null) }, '取消'),
@@ -2490,6 +3530,139 @@ window.__ModuleLoader__.load({
                         onClick: confirmNewDoc,
                     }, creating ? '创建中…' : '创建')))) : null;
 
+            const importDialogNode = importDialog ? h('div', {
+                className: 'pxs-modal',
+                onPointerDown: (event) => {
+                    if (event.target === event.currentTarget && !importDialog.busy) setImportDialog(null);
+                },
+            },
+            h('div', { className: 'pxs-dialog pxs-import-dialog', role: 'dialog', 'aria-label': '打开图片' },
+                h('div', { className: 'pxs-dialog-head' },
+                    h('strong', null, '打开图片'),
+                    h('button', {
+                        className: 'pxs-dialog-close',
+                        disabled: importDialog.busy,
+                        onClick: () => setImportDialog(null),
+                    }, '×')),
+                h('div', { className: 'pxs-dialog-row' },
+                    h('span', { className: 'pxs-dialog-label' }, '名字'),
+                    h('input', {
+                        className: 'pxs-input',
+                        style: { flex: 1 },
+                        maxLength: 60,
+                        value: importDialog.name,
+                        onChange: (event) => {
+                            const value = event.target.value;
+                            setImportDialog((current) => (current ? { ...current, name: value } : current));
+                        },
+                    })),
+                h('div', { className: 'pxs-dialog-row' },
+                    h('span', { className: 'pxs-dialog-label' }, '原图'),
+                    h('span', { className: 'pxs-hint' },
+                        `${importDialog.sourceW}×${importDialog.sourceH} → ${importDialog.width}×${importDialog.height}`
+                        + ` · ${importDialog.palette.length} 色`
+                        + (importDialog.note ? ` · ${importDialog.note}` : ''))),
+                h('div', { className: 'pxs-dialog-row', style: { flexWrap: 'wrap' } },
+                    h('span', { className: 'pxs-dialog-label' }, '配色'),
+                    [
+                        { id: 'auto', label: '自动提取' },
+                        { id: 'current', label: '当前调色板', disabled: !(doc && doc.palette.length > 0) },
+                        { id: 'pico8', label: 'PICO-8' },
+                    ].map((mode) => h('button', {
+                        key: mode.id,
+                        className: 'pxs-scale-chip',
+                        'data-active': importDialog.mode === mode.id ? 'true' : 'false',
+                        disabled: mode.disabled === true || importDialog.busy,
+                        onClick: () => retuneImport({ mode: mode.id }),
+                    }, mode.label)),
+                    h('button', {
+                        className: 'pxs-scale-chip',
+                        'data-active': importDialog.dither ? 'true' : 'false',
+                        disabled: importDialog.busy,
+                        title: '误差扩散抖动，渐变更自然但像素更碎',
+                        onClick: () => retuneImport({ dither: !importDialog.dither }),
+                    }, '抖动')),
+                importDialog.preview
+                    ? h('div', { className: 'pxs-import-preview' },
+                        h('img', { src: importDialog.preview, alt: '导入预览' }))
+                    : null,
+                importDialog.error ? h('div', { className: 'pxs-dialog-error' }, importDialog.error) : null,
+                h('div', { className: 'pxs-dialog-actions' },
+                    h('button', {
+                        className: 'pxs-btn',
+                        disabled: importDialog.busy,
+                        onClick: () => setImportDialog(null),
+                    }, '取消'),
+                    h('button', {
+                        className: 'pxs-btn pxs-btn-primary',
+                        disabled: importDialog.busy || !Array.isArray(importDialog.rows),
+                        onClick: confirmImport,
+                    }, importDialog.busy ? '导入中…' : '导入')))) : null;
+
+            const resizeDialogNode = resizeDialog ? h('div', {
+                className: 'pxs-modal',
+                onPointerDown: (event) => {
+                    if (event.target === event.currentTarget) setResizeDialog(null);
+                },
+            },
+            h('div', { className: 'pxs-dialog pxs-resize-dialog', role: 'dialog', 'aria-label': '画布尺寸' },
+                h('div', { className: 'pxs-dialog-head' },
+                    h('strong', null, '画布尺寸 / 裁剪'),
+                    h('button', {
+                        className: 'pxs-dialog-close',
+                        onClick: () => setResizeDialog(null),
+                    }, '×')),
+                h('div', { className: 'pxs-dialog-row' },
+                    h('span', { className: 'pxs-dialog-label' }, '当前'),
+                    h('span', { className: 'pxs-hint' },
+                        doc ? `${doc.w}×${doc.h} · 目标 ${Math.round(Number(resizeDialog.w) || 0)}×${Math.round(Number(resizeDialog.h) || 0)}` : '')),
+                h('div', { className: 'pxs-dialog-row' },
+                    h('span', { className: 'pxs-dialog-label' }, '宽'),
+                    h('input', {
+                        className: 'pxs-input',
+                        style: { width: 84 },
+                        type: 'number',
+                        min: 1,
+                        max: MAX_SIDE,
+                        value: resizeDialog.w,
+                        onChange: (event) => {
+                            const value = event.target.value;
+                            setResizeDialog((current) => (current ? { ...current, w: value } : current));
+                        },
+                    }),
+                    h('span', { className: 'pxs-dialog-label' }, '高'),
+                    h('input', {
+                        className: 'pxs-input',
+                        style: { width: 84 },
+                        type: 'number',
+                        min: 1,
+                        max: MAX_SIDE,
+                        value: resizeDialog.h,
+                        onChange: (event) => {
+                            const value = event.target.value;
+                            setResizeDialog((current) => (current ? { ...current, h: value } : current));
+                        },
+                    }),
+                    h('span', { className: 'pxs-hint' }, `最大 ${MAX_SIDE}`)),
+                h('div', { className: 'pxs-dialog-row' },
+                    h('span', { className: 'pxs-dialog-label' }, '锚点'),
+                    h('div', { className: 'pxs-anchor-grid' },
+                        ANCHORS.map((anchor) => h('button', {
+                            key: anchor.id,
+                            className: 'pxs-anchor-chip',
+                            'data-active': resizeDialog.anchor === anchor.id ? 'true' : 'false',
+                            title: `以${anchor.label}为基准保留画面`,
+                            onClick: () => setResizeDialog((current) => (current ? { ...current, anchor: anchor.id } : current)),
+                        }, anchor.label))),
+                    h('span', { className: 'pxs-hint' }, '扩边补透明，裁掉的部分丢弃')),
+                resizeDialog.error ? h('div', { className: 'pxs-dialog-error' }, resizeDialog.error) : null,
+                h('div', { className: 'pxs-dialog-actions' },
+                    h('button', { className: 'pxs-btn', onClick: () => setResizeDialog(null) }, '取消'),
+                    h('button', {
+                        className: 'pxs-btn pxs-btn-primary',
+                        onClick: confirmResize,
+                    }, '应用')))) : null;
+
             return h('div', { className: 'pxs-root' },
                 h('style', null, CSS),
                 barNode,
@@ -2517,7 +3690,9 @@ window.__ModuleLoader__.load({
                 rightPanel),
                 menuNode,
                 dialogNode,
-                newDialogNode);
+                newDialogNode,
+                importDialogNode,
+                resizeDialogNode);
         }
 
         /**
@@ -2575,6 +3750,23 @@ window.__ModuleLoader__.load({
             }
         }
 
+        // Test hook: tools/select-test.cjs drives the pure selection helpers.
+        if (window.__PXS_TEST__) {
+            window.__PXS_TEST__.selection = {
+                selectionBetween,
+                clampRectangle,
+                moveRectangle,
+                pointInRectangle,
+                readRegion,
+                writeRegion,
+                blankRegion,
+                fillRows,
+                emptyRows,
+                mirrorRows,
+                mergedRegion,
+            };
+        }
+
         return {
             inject: ['slots'],
             apply(ctx) {