@underpostnet/cyberia 3.3.73 → 3.3.77

package/src/client/components/cyberia/ObjectLayerEngine.js

@@ -1,6 +1,45 @@
 import { darkTheme, renderChessPattern } from '../core/Css.js';
 import { NotificationManager } from '../core/NotificationManager.js';
 
+/* Stroked 24x24 glyphs drawn in currentColor. Inline rather than a font: the toolbar lives in a
+ * shadow root, where an external icon stylesheet never lands. */
+const ICONS = {
+  undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-4"/>',
+  redo: '<path d="m15 14 5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h4"/>',
+  pencil: '<path d="M4 20h4L19.5 8.5a2 2 0 0 0-3-3L5 17v3z"/><path d="m14.5 6.5 3 3"/>',
+  eraser: '<path d="M9 20h11"/><path d="M5.5 16.5 13 9l5.5 5.5L14 19H8z"/>',
+  fill: '<path d="M11 4 5.5 9.5a2 2 0 0 0 0 3l4.5 4.5a2 2 0 0 0 3 0L18.5 12z"/><path d="M20 15s2 2.5 2 4a2 2 0 0 1-4 0c0-1.5 2-4 2-4z"/>',
+  eyedropper: '<path d="M16.8 3.2a2.5 2.5 0 0 1 4 3l-2 2-3.5-3.5z"/><path d="m14.5 6.5-10 10L4 20l3.5-.5 10-10z"/>',
+  marquee: '<rect x="3.5" y="3.5" width="17" height="17" rx="1" stroke-dasharray="3.5 3"/>',
+  move: '<path d="M12 3v18M3 12h18"/><path d="m9 6 3-3 3 3M9 18l3 3 3-3M6 9l-3 3 3 3M18 9l3 3-3 3"/>',
+  copy: '<rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>',
+  cut: '<circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M7.5 16 18 4M16.5 16 6 4"/>',
+  paste: '<rect x="5" y="5" width="14" height="16" rx="2"/><path d="M9 5V3.5h6V5"/><path d="M9 11h6M9 15h6"/>',
+  trash: '<path d="M4 7h16M9 7V4h6v3"/><path d="m6.5 7 1 13h9l1-13"/>',
+  flipH: '<path d="M12 3v18" stroke-dasharray="3 3"/><path d="M9 7 4.5 12 9 17z"/><path d="m15 7 4.5 5-4.5 5z"/>',
+  flipV: '<path d="M3 12h18" stroke-dasharray="3 3"/><path d="M7 9 12 4.5 17 9z"/><path d="m7 15 5 4.5 5-4.5z"/>',
+  rotateCW: '<path d="M20.5 12a8.5 8.5 0 1 1-2.8-6.3"/><path d="M21 4v5h-5"/>',
+  rotateCCW: '<path d="M3.5 12a8.5 8.5 0 1 0 2.8-6.3"/><path d="M3 4v5h5"/>',
+  clear: '<rect x="4" y="4" width="16" height="16" rx="2" stroke-dasharray="3 3"/><path d="m9 9 6 6M15 9l-6 6"/>',
+  selectAll:
+    '<rect x="3.5" y="3.5" width="17" height="17" rx="1" stroke-dasharray="3.5 3"/><rect x="8" y="8" width="8" height="8" rx="1" fill="currentColor" stroke="none"/>',
+  rescale: '<path d="M4 10V4h6"/><path d="M20 14v6h-6"/><path d="m4 4 7 7M20 20l-7-7"/>',
+};
+
+/* One icon button: an inline SVG plus the accessible name, since the glyph carries no text. */
+const iconButton = (part, name, label, { active = false } = {}) => html`
+  <button
+    part="${part}"
+    class="icon-btn"
+    type="button"
+    title="${label}"
+    aria-label="${label}"
+    ${active ? 'data-active' : ''}
+  >
+    <svg viewBox="0 0 24 24" aria-hidden="true">${ICONS[name]}</svg>
+  </button>
+`;
+
 class ObjectLayerEngineElement extends HTMLElement {
   constructor() {
     super();
@@ -25,7 +64,27 @@ class ObjectLayerEngineElement extends HTMLElement {
           gap: var(--gap);
           align-items: flex-start;
         }
+        /* Rulers on two sides of the frame: the X axis above, the Y axis on the left, and the
+           frame's own border padded onto each so the ticks line up with the cells inside it. */
+        .board {
+          display: grid;
+          grid-template-columns: auto auto;
+          grid-template-rows: auto auto;
+          line-height: 0;
+        }
+        canvas.ruler-x {
+          grid-column: 2;
+          border-left: var(--border);
+          border-left-color: transparent;
+        }
+        canvas.ruler-y {
+          grid-row: 2;
+          border-top: var(--border);
+          border-top-color: transparent;
+        }
         .canvas-frame {
+          grid-column: 2;
+          grid-row: 2;
           border: var(--border);
           display: inline-block;
           line-height: 0;
@@ -33,6 +92,12 @@ class ObjectLayerEngineElement extends HTMLElement {
           background: transparent;
           image-rendering: pixelated;
         }
+        .cursor-info {
+          font-size: 12px;
+          opacity: 0.75;
+          min-height: 1.2em;
+          font-variant-numeric: tabular-nums;
+        }
         canvas.canvas-layer {
           display: block;
           touch-action: none;
@@ -60,13 +125,164 @@ class ObjectLayerEngineElement extends HTMLElement {
           gap: 6px;
           align-items: center;
         }
+        .sel-info {
+          font-size: 12px;
+          opacity: 0.75;
+          min-width: 11ch;
+          font-variant-numeric: tabular-nums;
+        }
+
+        /* Icon buttons: square, quiet until hovered, ringed while active — the same state
+           language the palette element uses for a chosen swatch. */
+        .icon-btn {
+          appearance: none;
+          background: transparent;
+          border: 1px solid transparent;
+          border-radius: 6px;
+          color: inherit;
+          cursor: pointer;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 30px;
+          height: 30px;
+          padding: 0;
+          transition:
+            background-color 120ms ease,
+            border-color 120ms ease,
+            box-shadow 120ms ease;
+        }
+        .icon-btn svg {
+          width: 18px;
+          height: 18px;
+          fill: none;
+          stroke: currentColor;
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          pointer-events: none;
+        }
+        .icon-btn:hover:not(:disabled) {
+          background: ${darkTheme ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.08)'};
+        }
+        .icon-btn:disabled {
+          opacity: 0.35;
+          cursor: default;
+        }
+        .icon-btn[data-active] {
+          background: ${darkTheme ? 'rgba(255, 255, 255, 0.16)' : 'rgba(0, 0, 0, 0.1)'};
+          border-color: currentColor;
+          box-shadow: 0 0 0 2px ${darkTheme ? 'rgba(255, 255, 255, 0.22)' : 'rgba(0, 0, 0, 0.16)'};
+        }
+
+        /* A rule between groups, so the toolbar reads as sections rather than one long row. */
+        .sep {
+          width: 1px;
+          align-self: stretch;
+          min-height: 24px;
+          background: ${darkTheme ? 'rgba(255, 255, 255, 0.18)' : 'rgba(0, 0, 0, 0.15)'};
+        }
+
+        /* The selection bar only exists while select mode is on, so the default toolbar stays
+           as short as it was. */
+        .sel-bar[hidden] {
+          display: none;
+        }
+        .sel-bar {
+          display: flex;
+          gap: 6px;
+          flex-wrap: wrap;
+          align-items: center;
+          padding: 4px 6px;
+          border-radius: 8px;
+          background: ${darkTheme ? 'rgba(255, 255, 255, 0.07)' : 'rgba(0, 0, 0, 0.05)'};
+        }
+        .hint {
+          font-size: 12px;
+          opacity: 0.7;
+        }
+
+        /* Right-click menu, positioned over the canvas frame at the pointer. */
+        .ctx-menu {
+          position: absolute;
+          z-index: 5;
+          min-width: 148px;
+          padding: 4px;
+          border-radius: 8px;
+          line-height: normal;
+          background: ${darkTheme ? '#242424' : '#ffffff'};
+          border: 1px solid ${darkTheme ? 'rgba(255, 255, 255, 0.18)' : 'rgba(0, 0, 0, 0.18)'};
+          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+        }
+        .ctx-menu[hidden] {
+          display: none;
+        }
+        .ctx-item {
+          appearance: none;
+          background: transparent;
+          border: 0;
+          border-radius: 5px;
+          color: inherit;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+          padding: 6px 8px;
+          font: inherit;
+          font-size: 13px;
+          text-align: left;
+        }
+        .ctx-item svg {
+          width: 15px;
+          height: 15px;
+          fill: none;
+          stroke: currentColor;
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          flex: none;
+        }
+        .ctx-item:hover:not(:disabled) {
+          background: ${darkTheme ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.08)'};
+        }
+        .ctx-item:disabled {
+          opacity: 0.35;
+          cursor: default;
+        }
+        .ctx-key {
+          margin-left: auto;
+          opacity: 0.55;
+          font-size: 11px;
+        }
       </style>
 
       <div class="wrap">
         <div class="toolbar">
-          <button part="undo" title="Undo" disabled>Undo</button>
-          <button part="redo" title="Redo" disabled>Redo</button>
+          ${iconButton('undo', 'undo', 'Undo (Ctrl+Z)')} ${iconButton('redo', 'redo', 'Redo (Ctrl+Shift+Z)')}
+
+          <span class="sep"></span>
+
+          <!-- Tools: one button each, so the active tool is visible without opening anything. -->
+          ${iconButton('tool-pencil', 'pencil', 'Pencil', { active: true })}
+          ${iconButton('tool-eraser', 'eraser', 'Eraser')} ${iconButton('tool-fill', 'fill', 'Fill')}
+          ${iconButton('tool-eyedropper', 'eyedropper', 'Pick colour')}
+
+          <span class="sep"></span>
+
+          <!-- Select mode: while it is on the canvas selects and moves instead of drawing. -->
+          ${iconButton('tool-select', 'marquee', 'Select mode: drag to select, then drag to move')}
+
+          <span class="sep"></span>
 
+          <div class="group">
+            ${iconButton('flip-h', 'flipH', 'Flip horizontally')} ${iconButton('flip-v', 'flipV', 'Flip vertically')}
+            ${iconButton('rot-ccw', 'rotateCCW', 'Rotate -90°')} ${iconButton('rot-cw', 'rotateCW', 'Rotate +90°')}
+            ${iconButton('clear', 'clear', 'Clear (make fully transparent)')}
+          </div>
+        </div>
+
+        <div class="toolbar">
           <input type="color" part="color" title="Brush color" value="#000000" />
           <label
             >hex
@@ -84,31 +300,6 @@ class ObjectLayerEngineElement extends HTMLElement {
             <input type="number" part="b-input" min="0" max="255" value="0" title="Blue (0-255)" style="width:5ch" />
             <input type="number" part="a-input" min="0" max="255" value="255" title="Alpha (0-255)" style="width:5ch" />
           </label>
-          <select part="tool">
-            <option value="pencil">pencil</option>
-            <option value="eraser">eraser</option>
-            <option value="fill">fill</option>
-            <option value="eyedropper">eyedropper</option>
-          </select>
-
-          <label>brush <input type="number" part="brush-size" min="1" value="1" /></label>
-          <label>pixel-size <input type="number" part="pixel-size" min="1" value="16" /></label>
-
-          <!-- New: cell dimensions (width x height) -->
-          <label
-            >cells <input type="number" part="cell-width" min="1" value="16" style="width:6ch" /> x
-            <input type="number" part="cell-height" min="1" value="16" style="width:6ch"
-          /></label>
-
-          <label class="switch"> <input type="checkbox" part="toggle-grid" /> grid </label>
-
-          <!-- New: transform tools -->
-          <div class="group">
-            <button part="flip-h" title="Flip horizontally">Flip H</button>
-            <button part="flip-v" title="Flip vertically">Flip V</button>
-            <button part="rot-ccw" title="Rotate -90°">⟲</button>
-            <button part="rot-cw" title="Rotate +90°">⟳</button>
-          </div>
 
           <label
             >opacity <input type="range" part="opacity" min="0" max="255" value="255" style="width:10rem" /><input
@@ -120,29 +311,75 @@ class ObjectLayerEngineElement extends HTMLElement {
               style="width:5ch;margin-left:4px"
           /></label>
 
-          <button part="clear" title="Clear (make fully transparent)">Clear</button>
+          <label>brush <input type="number" part="brush-size" min="1" value="1" /></label>
+        </div>
+
+        <div class="toolbar">
+          <label>pixel-size <input type="number" part="pixel-size" min="1" value="16" /></label>
+          <label
+            >cells <input type="number" part="cell-width" min="1" value="16" style="width:6ch" /> x
+            <input type="number" part="cell-height" min="1" value="16" style="width:6ch"
+          /></label>
+          <label class="switch"> <input type="checkbox" part="toggle-grid" /> grid </label>
+
+          <span class="sep"></span>
 
           <button part="export">Export PNG</button>
           <button part="export-json">Export JSON</button>
           <button part="import-json">Import JSON</button>
         </div>
-        <div class="canvas-frame" style="${renderChessPattern()}">
-          <canvas part="canvas" class="canvas-layer"></canvas>
-          <canvas part="grid" class="grid-layer"></canvas>
+
+        <!-- Everything the selection can do, shown only while select mode is on. -->
+        <div class="sel-bar" part="sel-bar" hidden>
+          ${iconButton('select-all', 'selectAll', 'Select all (Ctrl+A)')}
+          ${iconButton('reselect', 'marquee', 'Reselect: drop this one and drag a new area (Esc)')}
+          <span class="sep"></span>
+          ${iconButton('copy', 'copy', 'Copy (Ctrl+C)')} ${iconButton('cut', 'cut', 'Cut (Ctrl+X)')}
+          ${iconButton('paste', 'paste', 'Paste (Ctrl+V)')} ${iconButton('delete', 'trash', 'Delete (Del)')}
+          <span class="sep"></span>
+          <label
+            >rescale <input type="number" part="scale-width" min="1" value="16" style="width:6ch" /> x
+            <input type="number" part="scale-height" min="1" value="16" style="width:6ch"
+          /></label>
+          ${iconButton('scale-apply', 'rescale', 'Resample to that size, keeping the source palette')}
+          <span class="sep"></span>
+          <span part="sel-info" class="sel-info">no selection</span>
+          <span part="sel-hint" class="hint">Drag to select</span>
+        </div>
+
+        <div class="board">
+          <canvas part="ruler-x" class="ruler-x"></canvas>
+          <canvas part="ruler-y" class="ruler-y"></canvas>
+          <div class="canvas-frame" style="${renderChessPattern()}">
+            <canvas part="canvas" class="canvas-layer"></canvas>
+            <canvas part="grid" class="grid-layer"></canvas>
+            <div class="ctx-menu" part="ctx-menu" hidden></div>
+          </div>
         </div>
+        <span part="cursor-info" class="cursor-info"></span>
       </div>
     `;
 
     // DOM
     this._pixelCanvas = this.shadowRoot.querySelector('canvas[part="canvas"]');
     this._gridCanvas = this.shadowRoot.querySelector('canvas[part="grid"]');
+    this._rulerX = this.shadowRoot.querySelector('canvas[part="ruler-x"]');
+    this._rulerY = this.shadowRoot.querySelector('canvas[part="ruler-y"]');
+    this._cursorInfo = this.shadowRoot.querySelector('span[part="cursor-info"]');
     this._colorInput = this.shadowRoot.querySelector('input[part="color"]');
     this._hexInput = this.shadowRoot.querySelector('input[part="hex-input"]');
     this._rInput = this.shadowRoot.querySelector('input[part="r-input"]');
     this._gInput = this.shadowRoot.querySelector('input[part="g-input"]');
     this._bInput = this.shadowRoot.querySelector('input[part="b-input"]');
     this._aInput = this.shadowRoot.querySelector('input[part="a-input"]');
-    this._toolSelect = this.shadowRoot.querySelector('select[part="tool"]');
+    // Tool buttons, keyed by the tool they select.
+    this._toolButtons = {
+      pencil: this.shadowRoot.querySelector('button[part="tool-pencil"]'),
+      eraser: this.shadowRoot.querySelector('button[part="tool-eraser"]'),
+      fill: this.shadowRoot.querySelector('button[part="tool-fill"]'),
+      eyedropper: this.shadowRoot.querySelector('button[part="tool-eyedropper"]'),
+    };
+    this._selectModeBtn = this.shadowRoot.querySelector('button[part="tool-select"]');
     this._brushSizeInput = this.shadowRoot.querySelector('input[part="brush-size"]');
     this._pixelSizeInput = this.shadowRoot.querySelector('input[part="pixel-size"]');
     this._exportBtn = this.shadowRoot.querySelector('button[part="export"]');
@@ -165,6 +402,21 @@ class ObjectLayerEngineElement extends HTMLElement {
     this._undoBtn = this.shadowRoot.querySelector('button[part="undo"]');
     this._redoBtn = this.shadowRoot.querySelector('button[part="redo"]');
 
+    // selection + rescale controls
+    this._selBar = this.shadowRoot.querySelector('div[part="sel-bar"]');
+    this._selectAllBtn = this.shadowRoot.querySelector('button[part="select-all"]');
+    this._reselectBtn = this.shadowRoot.querySelector('button[part="reselect"]');
+    this._copyBtn = this.shadowRoot.querySelector('button[part="copy"]');
+    this._cutBtn = this.shadowRoot.querySelector('button[part="cut"]');
+    this._pasteBtn = this.shadowRoot.querySelector('button[part="paste"]');
+    this._deleteBtn = this.shadowRoot.querySelector('button[part="delete"]');
+    this._selInfo = this.shadowRoot.querySelector('span[part="sel-info"]');
+    this._selHint = this.shadowRoot.querySelector('span[part="sel-hint"]');
+    this._ctxMenu = this.shadowRoot.querySelector('div[part="ctx-menu"]');
+    this._scaleWidthInput = this.shadowRoot.querySelector('input[part="scale-width"]');
+    this._scaleHeightInput = this.shadowRoot.querySelector('input[part="scale-height"]');
+    this._scaleApplyBtn = this.shadowRoot.querySelector('button[part="scale-apply"]');
+
     // internal state
     this._width = 16;
     this._height = 16;
@@ -187,6 +439,19 @@ class ObjectLayerEngineElement extends HTMLElement {
     this._maxHistory = 200;
     this._transactionActive = false; // grouping for pointer drags
 
+    // Select mode replaces drawing with selecting and moving; off, the canvas draws as before.
+    this._selectMode = false;
+    // selection: {x, y, w, h} in cells, or null. _selAnchor holds the marquee drag origin.
+    this._selection = null;
+    this._selAnchor = null;
+    // While a move is under way the cells travel here, lifted out of the matrix so what they
+    // covered shows through, and are written back on drop.
+    this._floating = null;
+    this._moveGrab = null;
+    this._clipboard = null; // matrix copied out of a selection
+    this._antsPhase = 0; // marching-ants offset, advanced while a selection stands
+    this._antsFrame = 0;
+
     // binds
     this._onPointerDown = this._onPointerDown.bind(this);
     this._onPointerMove = this._onPointerMove.bind(this);
@@ -198,6 +463,9 @@ class ObjectLayerEngineElement extends HTMLElement {
     this.flipVertical = this.flipVertical.bind(this);
     this.rotateCW = this.rotateCW.bind(this);
     this.rotateCCW = this.rotateCCW.bind(this);
+    this._tickAnts = this._tickAnts.bind(this);
+    this._onContextMenu = this._onContextMenu.bind(this);
+    this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this);
 
     // ensure keyboard handlers bound for undo/redo
   }
@@ -206,7 +474,9 @@ class ObjectLayerEngineElement extends HTMLElement {
     return ['width', 'height', 'pixel-size'];
   }
   attributeChangedCallback(name, oldV, newV) {
-    if (oldV === newV) return;
+    // An attribute this element wrote itself is already applied: reacting to it would read the
+    // sibling axis before its own write lands and cut the matrix to the stale size.
+    if (oldV === newV || this._reflecting) return;
     if (name === 'width') this.width = parseInt(newV, 10) || this._width;
     if (name === 'height') this.height = parseInt(newV, 10) || this._height;
     if (name === 'pixel-size') this.pixelSize = parseInt(newV, 10) || this._pixelSize;
@@ -265,7 +535,10 @@ class ObjectLayerEngineElement extends HTMLElement {
     if (this._bInput) this._bInput.addEventListener('change', updateFromRGBAInputs);
     if (this._aInput) this._aInput.addEventListener('change', updateFromRGBAInputs);
 
-    this._toolSelect.addEventListener('change', (e) => this.setTool(e.target.value));
+    for (const [name, button] of Object.entries(this._toolButtons)) {
+      if (button) button.addEventListener('click', () => this.setTool(name));
+    }
+    if (this._selectModeBtn) this._selectModeBtn.addEventListener('click', () => this.toggleSelectMode());
     this._brushSizeInput.addEventListener('change', (e) => this.setBrushSize(parseInt(e.target.value, 10) || 1));
     this._pixelSizeInput.addEventListener('change', (e) => {
       this.pixelSize = Math.max(1, parseInt(e.target.value, 10) || 1);
@@ -367,6 +640,26 @@ class ObjectLayerEngineElement extends HTMLElement {
     if (this._undoBtn) this._undoBtn.addEventListener('click', () => this.undo());
     if (this._redoBtn) this._redoBtn.addEventListener('click', () => this.redo());
 
+    // selection + clipboard
+    if (this._selectAllBtn) this._selectAllBtn.addEventListener('click', () => this.selectAll());
+    if (this._reselectBtn) this._reselectBtn.addEventListener('click', () => this.reselect());
+    if (this._copyBtn) this._copyBtn.addEventListener('click', () => this.copySelection());
+    if (this._cutBtn) this._cutBtn.addEventListener('click', () => this.cutSelection());
+    if (this._pasteBtn) this._pasteBtn.addEventListener('click', () => this.paste());
+    if (this._deleteBtn) this._deleteBtn.addEventListener('click', () => this.deleteSelection());
+
+    // Right-click opens the clipboard menu over the canvas, and any press elsewhere closes it.
+    this._pixelCanvas.addEventListener('contextmenu', this._onContextMenu);
+    document.addEventListener('pointerdown', this._onDocumentPointerDown, true);
+
+    // rescale: the inputs track whatever the Apply button would act on
+    if (this._scaleApplyBtn)
+      this._scaleApplyBtn.addEventListener('click', () => {
+        const w = Math.max(1, parseInt(this._scaleWidthInput?.value, 10) || 1);
+        const h = Math.max(1, parseInt(this._scaleHeightInput?.value, 10) || 1);
+        this.rescale(w, h);
+      });
+
     // Pointer events
     this._pixelCanvas.addEventListener('pointerdown', this._onPointerDown);
     window.addEventListener('pointermove', this._onPointerMove);
@@ -379,6 +672,8 @@ class ObjectLayerEngineElement extends HTMLElement {
     this.render();
     this._clearHistory();
     this._updateToolbarButtons();
+    this._updateToolButtons();
+    this._updateSelectionUI();
   }
 
   disconnectedCallback() {
@@ -398,6 +693,13 @@ class ObjectLayerEngineElement extends HTMLElement {
     if (this._redoBtn) this._redoBtn.removeEventListener('click', () => this.redo());
 
     window.removeEventListener('keydown', this._onKeyDown);
+
+    this._pixelCanvas.removeEventListener('contextmenu', this._onContextMenu);
+    document.removeEventListener('pointerdown', this._onDocumentPointerDown, true);
+
+    // the ants loop holds a frame handle across renders; it must not outlive the element
+    if (this._antsFrame) cancelAnimationFrame(this._antsFrame);
+    this._antsFrame = 0;
   }
 
   // ---------------- Matrix helpers ----------------
@@ -418,6 +720,22 @@ class ObjectLayerEngineElement extends HTMLElement {
     return mat;
   }
 
+  /* Takes new cell dimensions and keeps the size inputs and attributes saying the same thing,
+   * so a matrix loaded at another size cannot leave stale numbers for the next change to apply. */
+  _setDimensions(w, h) {
+    this._width = w;
+    this._height = h;
+    if (this._widthInput) this._widthInput.value = String(w);
+    if (this._heightInput) this._heightInput.value = String(h);
+    this._reflecting = true;
+    try {
+      this.setAttribute('width', String(w));
+      this.setAttribute('height', String(h));
+    } finally {
+      this._reflecting = false;
+    }
+  }
+
   loadMatrix(matrix) {
     if (!Array.isArray(matrix) || matrix.length === 0) throw new TypeError('matrix must be non-empty 2D array');
     const h = matrix.length;
@@ -430,9 +748,10 @@ class ObjectLayerEngineElement extends HTMLElement {
         matrix[y][x] = v.map((n) => this._clampInt(n));
       }
     }
-    this._width = w;
-    this._height = h;
     this._matrix = matrix.map((r) => r.map((c) => c.slice()));
+    this._setDimensions(w, h);
+    this.clearSelection();
+    this._updateSelectionUI();
     this._setupContextsAndSize();
     this.render();
     this.dispatchEvent(new CustomEvent('matrixload', { detail: { width: w, height: h } }));
@@ -453,16 +772,11 @@ class ObjectLayerEngineElement extends HTMLElement {
       const minH = Math.min(nh, this._height);
       for (let y = 0; y < minH; y++) for (let x = 0; x < minW; x++) newMat[y][x] = this._matrix[y][x].slice();
     }
-    this._width = nw;
-    this._height = nh;
     this._matrix = newMat;
+    this._setDimensions(nw, nh);
 
-    // keep inputs and attributes in sync
-    if (this._widthInput) this._widthInput.value = String(this._width);
-    if (this._heightInput) this._heightInput.value = String(this._height);
-    this.setAttribute('width', String(this._width));
-    this.setAttribute('height', String(this._height));
-
+    this._clampSelection();
+    this._updateSelectionUI();
     this._setupContextsAndSize();
     this.render();
     this.dispatchEvent(new CustomEvent('resize', { detail: { width: nw, height: nh } }));
@@ -507,9 +821,62 @@ class ObjectLayerEngineElement extends HTMLElement {
       this._pixelCtx.imageSmoothingEnabled = false;
       this._gridCtx.imageSmoothingEnabled = false;
     } catch (e) {}
+    this._renderRulers();
     this._renderGrid();
   }
 
+  /* Cell indices along each axis. Every cell gets a tick; a number goes on every cell it fits
+   * on, and on every Nth otherwise, so the rulers stay readable at any pixel size. */
+  _renderRulers() {
+    const ps = this._pixelSize;
+    const font = '10px ui-monospace, Menlo, monospace';
+    const color = darkTheme ? '#e1e1e1' : '#272727';
+    const thickness = 16;
+    const measure = this._rulerX.getContext('2d');
+    measure.font = font;
+    const digits = measure.measureText(String(Math.max(this._width, this._height) - 1)).width;
+    const step = Math.max(1, Math.ceil((digits + 4) / ps));
+
+    const draw = (canvas, count, horizontal) => {
+      canvas.width = horizontal ? count * ps : Math.ceil(digits) + 8;
+      canvas.height = horizontal ? thickness : count * ps;
+      canvas.style.width = `${canvas.width}px`;
+      canvas.style.height = `${canvas.height}px`;
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.font = font;
+      ctx.fillStyle = color;
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = horizontal ? 'center' : 'right';
+      ctx.beginPath();
+      for (let i = 0; i < count; i++) {
+        const at = i * ps + 0.5;
+        const labelled = i % step === 0;
+        const tick = labelled ? 5 : 2;
+        if (horizontal) {
+          ctx.moveTo(at, thickness);
+          ctx.lineTo(at, thickness - tick);
+          if (labelled) ctx.fillText(String(i), at + ps / 2, (thickness - tick) / 2);
+        } else {
+          ctx.moveTo(canvas.width, at);
+          ctx.lineTo(canvas.width - tick, at);
+          if (labelled) ctx.fillText(String(i), canvas.width - tick - 2, at + ps / 2);
+        }
+      }
+      ctx.stroke();
+    };
+    draw(this._rulerX, this._width, true);
+    draw(this._rulerY, this._height, false);
+  }
+
+  /* The cell under the pointer, or nothing once it leaves the canvas. */
+  _updateCursorInfo(x, y) {
+    const inside = x >= 0 && y >= 0 && x < this._width && y < this._height;
+    this._cursorInfo.textContent = inside ? `x: ${x}  y: ${y}` : '';
+  }
+
   render() {
     // sanity: ensure matrix shape matches
     if (
@@ -543,7 +910,7 @@ class ObjectLayerEngineElement extends HTMLElement {
     let p = 0;
     for (let y = 0; y < this._height; y++) {
       for (let x = 0; x < this._width; x++) {
-        const cell = this._matrix[y] && this._matrix[y][x] ? this._matrix[y][x] : [0, 0, 0, 0];
+        const cell = this._floatingCellAt(x, y) || (this._matrix[y] && this._matrix[y][x]) || [0, 0, 0, 0];
         data[p++] = this._clampInt(cell[0]);
         data[p++] = this._clampInt(cell[1]);
         data[p++] = this._clampInt(cell[2]);
@@ -555,6 +922,17 @@ class ObjectLayerEngineElement extends HTMLElement {
     if (this._showGrid) this._renderGrid();
   }
 
+  /* The travelling cell covering (x, y) during a move, or null. A fully transparent one still
+   * counts: it is what the moved block carries there, not a hole to see the canvas through. */
+  _floatingCellAt(x, y) {
+    const sel = this._selection;
+    if (!this._floating || !sel) return null;
+    const fx = x - sel.x;
+    const fy = y - sel.y;
+    if (fy < 0 || fx < 0 || fy >= this._floating.length || fx >= this._floating[0].length) return null;
+    return this._floating[fy][fx];
+  }
+
   _drawCheckerboard() {
     const ctx = this._pixelCtx;
     const w = this._width;
@@ -576,30 +954,137 @@ class ObjectLayerEngineElement extends HTMLElement {
     const w = this._gridCanvas.width;
     const h = this._gridCanvas.height;
     ctx.clearRect(0, 0, w, h);
-    if (!this._showGrid) return;
     const ps = this._pixelSize;
-    ctx.save();
-    ctx.strokeStyle = darkTheme ? '#e1e1e1' : '#272727';
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    for (let x = 0; x <= this._width; x++) {
-      const xx = x * ps + 0.5;
-      ctx.moveTo(xx, 0);
-      ctx.lineTo(xx, h);
+    if (this._showGrid) {
+      ctx.save();
+      ctx.strokeStyle = darkTheme ? '#e1e1e1' : '#272727';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      for (let x = 0; x <= this._width; x++) {
+        const xx = x * ps + 0.5;
+        ctx.moveTo(xx, 0);
+        ctx.lineTo(xx, h);
+      }
+      for (let y = 0; y <= this._height; y++) {
+        const yy = y * ps + 0.5;
+        ctx.moveTo(0, yy);
+        ctx.lineTo(w, yy);
+      }
+      ctx.stroke();
+      ctx.restore();
     }
-    for (let y = 0; y <= this._height; y++) {
-      const yy = y * ps + 0.5;
-      ctx.moveTo(0, yy);
-      ctx.lineTo(w, yy);
+    this._drawSelection();
+  }
+
+  /* Marching ants: a white rule under a moving dark dash, so the marquee reads against both a
+   * light and a dark drawing, and never reads as painted content. */
+  _drawSelection() {
+    const ctx = this._gridCtx;
+    const rect = this._selection;
+    if (!ctx || !rect) return;
+    const ps = this._pixelSize;
+    const box = [rect.x * ps + 0.5, rect.y * ps + 0.5, rect.w * ps - 1, rect.h * ps - 1];
+    ctx.save();
+    ctx.lineWidth = 1;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = 'rgba(255,255,255,0.9)';
+    ctx.strokeRect(...box);
+    ctx.setLineDash([4, 4]);
+    ctx.lineDashOffset = -this._antsPhase;
+    ctx.strokeStyle = 'rgba(0,0,0,0.9)';
+    ctx.strokeRect(...box);
+
+    // Cell rules inside the rectangle: the selection reads as the grid of cells it is, whether
+    // or not the canvas grid is on. Skipped once the cells are too small to tell apart.
+    if (ps >= 6) {
+      ctx.setLineDash([]);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = 'rgba(255,255,255,0.35)';
+      ctx.beginPath();
+      for (let i = 1; i < rect.w; i++) {
+        const xx = (rect.x + i) * ps + 0.5;
+        ctx.moveTo(xx, rect.y * ps);
+        ctx.lineTo(xx, (rect.y + rect.h) * ps);
+      }
+      for (let i = 1; i < rect.h; i++) {
+        const yy = (rect.y + i) * ps + 0.5;
+        ctx.moveTo(rect.x * ps, yy);
+        ctx.lineTo((rect.x + rect.w) * ps, yy);
+      }
+      ctx.stroke();
     }
-    ctx.stroke();
     ctx.restore();
   }
 
+  _tickAnts() {
+    if (!this._selection) {
+      this._antsFrame = 0;
+      return;
+    }
+    this._antsPhase = (this._antsPhase + 0.25) % 8;
+    this._renderGrid();
+    this._antsFrame = requestAnimationFrame(this._tickAnts);
+  }
+
+  _startAnts() {
+    if (this._antsFrame || !this._selection) return;
+    this._antsFrame = requestAnimationFrame(this._tickAnts);
+  }
+
   // ---------------- Tools & painting ----------------
+  /* Choosing a drawing tool leaves select mode, so the canvas draws again straight away. */
   setTool(name) {
+    if (!this._toolButtons[name]) return;
     this._tool = name;
-    if (this._toolSelect) this._toolSelect.value = name;
+    if (this._selectMode) this.setSelectMode(false);
+    this._updateToolButtons();
+  }
+
+  /* Select mode: the canvas selects and moves instead of drawing. Leaving it drops the
+   * selection and hands the canvas back to the current drawing tool. */
+  setSelectMode(on) {
+    const next = !!on;
+    if (next === this._selectMode) return;
+    this._selectMode = next;
+    if (!next) {
+      this._dropFloating();
+      this.clearSelection();
+      this._closeContextMenu();
+    }
+    if (this._selBar) this._selBar.hidden = !next;
+    this._updateToolButtons();
+    this._updateSelectionUI();
+    this._updateCursor();
+    this.dispatchEvent(new CustomEvent('selectmodechange', { detail: { active: next } }));
+  }
+
+  toggleSelectMode() {
+    this.setSelectMode(!this._selectMode);
+  }
+
+  /* Drops the current rectangle and waits for the next drag, without leaving select mode. */
+  reselect() {
+    this._dropFloating();
+    this.clearSelection();
+    this._updateCursor();
+  }
+
+  _updateToolButtons() {
+    for (const [name, button] of Object.entries(this._toolButtons)) {
+      if (!button) continue;
+      button.toggleAttribute('data-active', !this._selectMode && this._tool === name);
+    }
+    if (this._selectModeBtn) this._selectModeBtn.toggleAttribute('data-active', this._selectMode);
+  }
+
+  /* Crosshair to draw or to start a rectangle, the move cursor once the pointer is over one. */
+  _updateCursor(overSelection = false) {
+    this._pixelCanvas.style.cursor = this._selectMode && overSelection ? 'move' : 'crosshair';
+  }
+
+  _inSelection(x, y) {
+    const sel = this._selection;
+    return !!sel && x >= sel.x && y >= sel.y && x < sel.x + sel.w && y < sel.y + sel.h;
   }
 
   // set full RGBA brush color (alpha optional)
@@ -710,30 +1195,110 @@ class ObjectLayerEngineElement extends HTMLElement {
   }
 
   _onPointerDown(evt) {
+    if (evt.button === 2) return; // the context menu owns the right button
+    this._closeContextMenu();
     evt.preventDefault();
     this._isPointerDown = true;
     try {
       this._pixelCanvas.setPointerCapture(evt.pointerId);
     } catch (e) {}
     const [x, y] = this._toGridCoords(evt);
+
+    // Select mode: a press inside the rectangle moves it, anywhere else starts a new one.
+    // Neither opens an undo transaction here — the marquee changes no cell, and a move opens
+    // one when it commits.
+    if (this._selectMode) {
+      if (this._inSelection(x, y)) this._beginMove(x, y);
+      else {
+        this._dropFloating();
+        this._selAnchor = [x, y];
+        this.setSelection(x, y, x, y);
+      }
+      return;
+    }
     // start transaction for continuous stroke
     this._beginTransaction();
     this._applyToolAt(x, y, evt);
   }
+
   _onPointerMove(evt) {
-    if (!this._isPointerDown) return;
     const [x, y] = this._toGridCoords(evt);
+    this._updateCursorInfo(x, y);
+    if (!this._isPointerDown) {
+      // Hover feedback: the cursor says whether the next press moves or selects.
+      if (this._selectMode) this._updateCursor(this._inSelection(x, y));
+      return;
+    }
+    if (this._selectMode) {
+      if (this._moveGrab) this._dragMove(x, y);
+      else if (this._selAnchor) this.setSelection(this._selAnchor[0], this._selAnchor[1], x, y);
+      return;
+    }
     this._applyToolAt(x, y, evt, true);
   }
+
   _onPointerUp(evt) {
+    const wasSelecting = this._isPointerDown && this._selectMode;
     this._isPointerDown = false;
     try {
       this._pixelCanvas.releasePointerCapture(evt.pointerId);
     } catch (e) {}
+    if (wasSelecting) {
+      // A finished rectangle hands straight over to moving: the next drag inside it moves the
+      // cells, with no tool to switch to first.
+      this._selAnchor = null;
+      if (this._moveGrab) this._endMove();
+      this._updateSelectionUI();
+      this._updateCursor(true);
+      return;
+    }
     // finish transaction for the stroke
     this._endTransaction();
   }
 
+  // ---------------- Moving a selection ----------------
+  /* Lifts the selected cells out of the matrix so what they covered shows through while they
+   * travel. They ride in _floating until the drop writes them back. */
+  _beginMove(x, y) {
+    if (!this._selection) return;
+    if (!this._floating) {
+      this._floating = this._readRegion(this._selection);
+      const { x: sx, y: sy, w, h } = this._selection;
+      for (let ry = 0; ry < h; ry++) for (let rx = 0; rx < w; rx++) this._matrix[sy + ry][sx + rx] = [0, 0, 0, 0];
+    }
+    this._moveGrab = { dx: x - this._selection.x, dy: y - this._selection.y };
+    this._updateCursor(true);
+    this.render();
+  }
+
+  _dragMove(x, y) {
+    if (!this._moveGrab || !this._selection) return;
+    this._selection = { ...this._selection, x: x - this._moveGrab.dx, y: y - this._moveGrab.dy };
+    this._updateSelectionUI();
+    this.render();
+    this._renderGrid();
+  }
+
+  _endMove() {
+    this._moveGrab = null;
+    if (!this._floating) return;
+    // Committing is one undo step: the lift and every drag frame collapse into the drop.
+    this._beginTransaction();
+    this._writeRegion(this._floating, this._selection.x, this._selection.y);
+    this._floating = null;
+    this.render();
+    this._endTransaction();
+    this._clampSelection();
+    this.dispatchEvent(new CustomEvent('move', { detail: this.getSelection() }));
+  }
+
+  /* Puts travelling cells back where they currently sit, for anything that ends a move without
+   * a pointer release — leaving select mode, reselecting, a new rectangle. */
+  _dropFloating() {
+    if (this._floating) this._endMove();
+    this._moveGrab = null;
+  }
+
   _applyToolAt(x, y, evt, continuous = false) {
     if (!this._inBounds(x, y)) return;
     switch (this._tool) {
@@ -753,9 +1318,310 @@ class ObjectLayerEngineElement extends HTMLElement {
     }
   }
 
+  // ---------------- Selection ----------------
+  /* Cells the marquee covers, clamped to the canvas, or null. */
+  getSelection() {
+    return this._selection ? { ...this._selection } : null;
+  }
+
+  /* Takes two corners in cell coordinates and keeps whatever part lands on the canvas. */
+  setSelection(ax, ay, bx, by) {
+    const x0 = Math.max(0, Math.min(this._width - 1, Math.min(ax, bx)));
+    const y0 = Math.max(0, Math.min(this._height - 1, Math.min(ay, by)));
+    const x1 = Math.max(0, Math.min(this._width - 1, Math.max(ax, bx)));
+    const y1 = Math.max(0, Math.min(this._height - 1, Math.max(ay, by)));
+    this._selection = { x: x0, y: y0, w: x1 - x0 + 1, h: y1 - y0 + 1 };
+    this._updateSelectionUI();
+    this._startAnts();
+    this._renderGrid();
+    this.dispatchEvent(new CustomEvent('selectionchange', { detail: this.getSelection() }));
+    return this.getSelection();
+  }
+
+  selectAll() {
+    return this.setSelection(0, 0, this._width - 1, this._height - 1);
+  }
+
+  clearSelection() {
+    if (!this._selection) return;
+    this._selection = null;
+    this._updateSelectionUI();
+    this._renderGrid();
+    this.dispatchEvent(new CustomEvent('selectionchange', { detail: null }));
+  }
+
+  /* Keeps the marquee on the canvas after the canvas itself changed shape. */
+  _clampSelection() {
+    if (!this._selection) return;
+    const { x, y, w, h } = this._selection;
+    if (x >= this._width || y >= this._height) return this.clearSelection();
+    this._selection = {
+      x,
+      y,
+      w: Math.min(w, this._width - x),
+      h: Math.min(h, this._height - y),
+    };
+    this._updateSelectionUI();
+  }
+
+  _updateSelectionUI() {
+    const sel = this._selection;
+    if (this._selInfo) this._selInfo.textContent = sel ? `${sel.x},${sel.y}  ${sel.w}×${sel.h}` : 'no selection';
+    // The hint tracks the one thing the canvas will do next, so the handover to moving is stated
+    // rather than left to be discovered.
+    if (this._selHint)
+      this._selHint.textContent = sel ? 'Drag inside to move · right-click for actions' : 'Drag to select';
+    if (this._copyBtn) this._copyBtn.disabled = !sel;
+    if (this._cutBtn) this._cutBtn.disabled = !sel;
+    if (this._deleteBtn) this._deleteBtn.disabled = !sel;
+    if (this._reselectBtn) this._reselectBtn.disabled = !sel;
+    if (this._pasteBtn) this._pasteBtn.disabled = !this._clipboard;
+    // The rescale inputs always show what Apply would act on: the selection, else the whole image.
+    if (this._scaleWidthInput) this._scaleWidthInput.value = String(sel ? sel.w : this._width);
+    if (this._scaleHeightInput) this._scaleHeightInput.value = String(sel ? sel.h : this._height);
+  }
+
+  // ---------------- Context menu ----------------
+  /* Right-click over the canvas, in select mode, opens the clipboard actions where the pointer
+   * is. Outside select mode the browser menu is left alone. */
+  _onContextMenu(evt) {
+    if (!this._selectMode) return;
+    evt.preventDefault();
+    const rect = this._pixelCanvas.getBoundingClientRect();
+    const [x, y] = this._toGridCoords(evt);
+    // A right-click outside the rectangle moves it there first, so the menu always acts on
+    // what was just pointed at.
+    if (!this._inSelection(x, y) && !this._floating) this.setSelection(x, y, x, y);
+    this._openContextMenu(evt.clientX - rect.left, evt.clientY - rect.top);
+  }
+
+  _openContextMenu(left, top) {
+    if (!this._ctxMenu) return;
+    const sel = !!this._selection;
+    const items = [
+      { label: 'Copy', icon: 'copy', key: 'Ctrl+C', enabled: sel, run: () => this.copySelection() },
+      { label: 'Cut', icon: 'cut', key: 'Ctrl+X', enabled: sel, run: () => this.cutSelection() },
+      { label: 'Paste', icon: 'paste', key: 'Ctrl+V', enabled: !!this._clipboard, run: () => this.paste() },
+      { label: 'Delete', icon: 'trash', key: 'Del', enabled: sel, run: () => this.deleteSelection() },
+      { label: 'Select all', icon: 'selectAll', key: 'Ctrl+A', enabled: true, run: () => this.selectAll() },
+      { label: 'Reselect', icon: 'marquee', key: 'Esc', enabled: sel, run: () => this.reselect() },
+    ];
+    this._ctxMenu.innerHTML = items
+      .map(
+        (item, index) => html`
+          <button class="ctx-item" type="button" data-index="${index}" ${item.enabled ? '' : 'disabled'}>
+            <svg viewBox="0 0 24 24" aria-hidden="true">${ICONS[item.icon]}</svg>
+            <span>${item.label}</span><span class="ctx-key">${item.key}</span>
+          </button>
+        `,
+      )
+      .join('');
+    this._ctxMenu.onclick = (event) => {
+      const button = event.target.closest('button[data-index]');
+      if (!button || button.disabled) return;
+      this._closeContextMenu();
+      items[Number(button.dataset.index)].run();
+    };
+    this._ctxMenu.hidden = false;
+    // Placed after unhiding, so the measured size is the real one and the menu stays on canvas.
+    const frame = this._ctxMenu.parentElement.getBoundingClientRect();
+    const box = this._ctxMenu.getBoundingClientRect();
+    this._ctxMenu.style.left = `${Math.max(0, Math.min(left, frame.width - box.width))}px`;
+    this._ctxMenu.style.top = `${Math.max(0, Math.min(top, frame.height - box.height))}px`;
+  }
+
+  _closeContextMenu() {
+    if (this._ctxMenu && !this._ctxMenu.hidden) this._ctxMenu.hidden = true;
+  }
+
+  /* Any press that is not on the menu dismisses it, including one in the page outside. */
+  _onDocumentPointerDown(evt) {
+    if (!this._ctxMenu || this._ctxMenu.hidden) return;
+    if (evt.composedPath().includes(this._ctxMenu)) return;
+    this._closeContextMenu();
+  }
+
+  // ---------------- Clipboard ----------------
+  _readRegion({ x, y, w, h }) {
+    const out = this._createEmptyMatrix(w, h);
+    for (let ry = 0; ry < h; ry++)
+      for (let rx = 0; rx < w; rx++) {
+        const cell = this._matrix[y + ry] && this._matrix[y + ry][x + rx];
+        out[ry][rx] = cell ? cell.slice() : [0, 0, 0, 0];
+      }
+    return out;
+  }
+
+  /* Writes a matrix with its top-left at (x, y), dropping whatever falls off the canvas. */
+  _writeRegion(src, x, y) {
+    for (let ry = 0; ry < src.length; ry++)
+      for (let rx = 0; rx < src[ry].length; rx++) {
+        const tx = x + rx;
+        const ty = y + ry;
+        if (this._inBounds(tx, ty)) this._matrix[ty][tx] = src[ry][rx].slice();
+      }
+  }
+
+  copySelection() {
+    if (!this._selection) return null;
+    this._clipboard = this._readRegion(this._selection);
+    this._updateSelectionUI();
+    this.dispatchEvent(new CustomEvent('copy', { detail: { width: this._selection.w, height: this._selection.h } }));
+    return this._clipboard.map((r) => r.map((c) => c.slice()));
+  }
+
+  cutSelection() {
+    const copied = this.copySelection();
+    if (copied) this.deleteSelection();
+    return copied;
+  }
+
+  /* Clears the selected cells to fully transparent. */
+  deleteSelection() {
+    if (!this._selection) return;
+    this._beginTransaction();
+    const { x, y, w, h } = this._selection;
+    for (let ry = 0; ry < h; ry++) for (let rx = 0; rx < w; rx++) this._matrix[y + ry][x + rx] = [0, 0, 0, 0];
+    this.render();
+    this._endTransaction();
+    this.dispatchEvent(new CustomEvent('delete', { detail: { width: w, height: h } }));
+  }
+
+  /* Pastes at the selection corner, or at `at`, and selects what landed — so the next rescale
+   * or move acts on the pasted cells without hunting for them. */
+  paste(at = null) {
+    if (!this._clipboard) return null;
+    // Pasted cells arrive selected, so select mode comes on with them and they can be moved.
+    this.setSelectMode(true);
+    const x = at ? Math.floor(at.x) : this._selection ? this._selection.x : 0;
+    const y = at ? Math.floor(at.y) : this._selection ? this._selection.y : 0;
+    this._beginTransaction();
+    this._writeRegion(this._clipboard, x, y);
+    this.render();
+    this._endTransaction();
+    const w = this._clipboard[0].length;
+    const h = this._clipboard.length;
+    this.setSelection(x, y, x + w - 1, y + h - 1);
+    this.dispatchEvent(new CustomEvent('paste', { detail: { x, y, width: w, height: h } }));
+    return this.getSelection();
+  }
+
+  // ---------------- Resampling ----------------
+  /* A destination cell keeps content when at least this much of what it covers is opaque. A
+   * quarter is one source cell under a 2x reduction, so a one-cell detail survives being halved
+   * instead of being averaged away. */
+  static RESAMPLE_COVERAGE_FLOOR = 0.25;
+
+  /**
+   * Resamples a matrix to a new cell size, keeping as much of the original as the new size allows.
+   *
+   * Every output cell is a colour the source actually used — never a blend. Growing is
+   * nearest-neighbour, exact at integer factors. Shrinking gives each destination cell the
+   * heaviest colour among the source cells it covers, weighted by alpha so transparent cells
+   * never outvote drawn ones, and clears the cell only when its coverage falls under
+   * {@link RESAMPLE_COVERAGE_FLOOR}. Edges stay hard and the palette the atlas pipeline indexes
+   * stays exactly as authored.
+   *
+   * @param {Array<Array<number[]>>} src - Source matrix of [r,g,b,a] cells.
+   * @param {number} newW - Target width in cells.
+   * @param {number} newH - Target height in cells.
+   * @returns {Array<Array<number[]>>} The resampled matrix.
+   */
+  resampleMatrix(src, newW, newH) {
+    const h = src.length;
+    const w = src[0].length;
+    const outW = Math.max(1, Math.floor(newW));
+    const outH = Math.max(1, Math.floor(newH));
+    const out = this._createEmptyMatrix(outW, outH);
+
+    if (outW >= w && outH >= h) {
+      for (let y = 0; y < outH; y++)
+        for (let x = 0; x < outW; x++)
+          out[y][x] =
+            src[Math.min(h - 1, Math.floor((y * h) / outH))][Math.min(w - 1, Math.floor((x * w) / outW))].slice();
+      return out;
+    }
+
+    const floor = ObjectLayerEngineElement.RESAMPLE_COVERAGE_FLOOR;
+    for (let y = 0; y < outH; y++) {
+      const sy0 = Math.floor((y * h) / outH);
+      const sy1 = Math.min(h, Math.max(sy0 + 1, Math.ceil(((y + 1) * h) / outH)));
+      for (let x = 0; x < outW; x++) {
+        const sx0 = Math.floor((x * w) / outW);
+        const sx1 = Math.min(w, Math.max(sx0 + 1, Math.ceil(((x + 1) * w) / outW)));
+        // Insertion order breaks ties, so an equal split resolves the same way every run.
+        const weights = new Map();
+        let alphaSum = 0;
+        let cells = 0;
+        let best = null;
+        let bestWeight = 0;
+        for (let sy = sy0; sy < sy1; sy++)
+          for (let sx = sx0; sx < sx1; sx++) {
+            const c = src[sy][sx];
+            alphaSum += c[3];
+            cells++;
+            if (c[3] === 0) continue;
+            const key = (c[0] << 24) | (c[1] << 16) | (c[2] << 8) | c[3];
+            const weight = (weights.get(key) || 0) + c[3];
+            weights.set(key, weight);
+            if (weight > bestWeight) {
+              bestWeight = weight;
+              best = c;
+            }
+          }
+        const coverage = cells > 0 ? alphaSum / (cells * 255) : 0;
+        out[y][x] = best && coverage >= floor ? best.slice() : [0, 0, 0, 0];
+      }
+    }
+    return out;
+  }
+
+  /**
+   * Resamples the selection in place, or the whole image when nothing is selected.
+   *
+   * A resized selection keeps its top-left corner: the old cells clear and the new ones land
+   * there, clipped to the canvas, and the marquee follows what actually fits.
+   *
+   * @param {number} newW - Target width in cells.
+   * @param {number} newH - Target height in cells.
+   */
+  rescale(newW, newH) {
+    const w = Math.max(1, Math.floor(newW));
+    const h = Math.max(1, Math.floor(newH));
+    if (!this._selection) {
+      if (w === this._width && h === this._height) return;
+      this._beginTransaction();
+      this._matrix = this.resampleMatrix(this._matrix, w, h);
+      this._setDimensions(w, h);
+      this._setupContextsAndSize();
+      this.render();
+      this._endTransaction();
+      this._updateSelectionUI();
+      this.dispatchEvent(new CustomEvent('rescale', { detail: { scope: 'image', width: w, height: h } }));
+      return;
+    }
+
+    const sel = this._selection;
+    if (w === sel.w && h === sel.h) return;
+    this._beginTransaction();
+    const resampled = this.resampleMatrix(this._readRegion(sel), w, h);
+    for (let ry = 0; ry < sel.h; ry++)
+      for (let rx = 0; rx < sel.w; rx++) this._matrix[sel.y + ry][sel.x + rx] = [0, 0, 0, 0];
+    this._writeRegion(resampled, sel.x, sel.y);
+    this.render();
+    this._endTransaction();
+    this.setSelection(
+      sel.x,
+      sel.y,
+      sel.x + Math.min(w, this._width - sel.x) - 1,
+      sel.y + Math.min(h, this._height - sel.y) - 1,
+    );
+    this.dispatchEvent(new CustomEvent('rescale', { detail: { scope: 'selection', width: w, height: h } }));
+  }
+
   // ---------------- Import / Export ----------------
   exportMatrixJSON() {
-    return JSON.stringify({ width: this._width, height: this._height, matrix: this._matrix });
+    return ObjectLayerEngineElement.matrixJSON(this._matrix);
   }
   importMatrixJSON(json) {
     const data = typeof json === 'string' ? JSON.parse(json) : json;
@@ -815,9 +1681,15 @@ class ObjectLayerEngineElement extends HTMLElement {
 
   // Async blob version (recommended for large images)
   toBlob(scale = this._pixelSize) {
+    return ObjectLayerEngineElement.matrixToBlob(this._matrix, scale);
+  }
+
+  /* A PNG of any matrix at `scale` px per cell, with no editor involved: a frame can be
+   * pictured from stored data without passing through — or racing — the canvas. */
+  static matrixToBlob(matrix, scale) {
     return new Promise((resolve) => {
-      const w = this._width,
-        h = this._height;
+      const h = matrix.length;
+      const w = matrix[0].length;
       const outW = Math.max(1, Math.floor(w * scale));
       const outH = Math.max(1, Math.floor(h * scale));
       const src = document.createElement('canvas');
@@ -829,11 +1701,11 @@ class ObjectLayerEngineElement extends HTMLElement {
       let p = 0;
       for (let y = 0; y < h; y++)
         for (let x = 0; x < w; x++) {
-          const c = this._matrix[y][x] || [0, 0, 0, 0];
-          data[p++] = this._clampInt(c[0]);
-          data[p++] = this._clampInt(c[1]);
-          data[p++] = this._clampInt(c[2]);
-          data[p++] = this._clampInt(c[3]);
+          const c = matrix[y][x] || [0, 0, 0, 0];
+          data[p++] = Math.min(255, Math.max(0, Math.floor(c[0]) || 0));
+          data[p++] = Math.min(255, Math.max(0, Math.floor(c[1]) || 0));
+          data[p++] = Math.min(255, Math.max(0, Math.floor(c[2]) || 0));
+          data[p++] = Math.min(255, Math.max(0, Math.floor(c[3]) || 0));
         }
       sctx.putImageData(img, 0, 0);
       const out = document.createElement('canvas');
@@ -848,6 +1720,11 @@ class ObjectLayerEngineElement extends HTMLElement {
     });
   }
 
+  /* The frame JSON the editor exports and imports, for any matrix. */
+  static matrixJSON(matrix) {
+    return JSON.stringify({ width: matrix[0].length, height: matrix.length, matrix });
+  }
+
   // Trigger download of PNG (uses blob to avoid huge data URLs on big exports)
   async exportPNG(filename = 'object-layer.png', scale = this._pixelSize) {
     const blob = await this.toBlob(scale);
@@ -871,13 +1748,10 @@ class ObjectLayerEngineElement extends HTMLElement {
 
   _loadSnapshot(snap) {
     if (!snap) return;
-    this._width = snap.width;
-    this._height = snap.height;
     this._matrix = snap.matrix.map((r) => r.map((c) => c.slice()));
-    if (this._widthInput) this._widthInput.value = String(this._width);
-    if (this._heightInput) this._heightInput.value = String(this._height);
-    this.setAttribute('width', String(this._width));
-    this.setAttribute('height', String(this._height));
+    this._setDimensions(snap.width, snap.height);
+    this._clampSelection();
+    this._updateSelectionUI();
     this._setupContextsAndSize();
     this.render();
     this.dispatchEvent(new CustomEvent('matrixload', { detail: { width: this._width, height: this._height } }));
@@ -953,9 +1827,31 @@ class ObjectLayerEngineElement extends HTMLElement {
     if (this._redoBtn) this._redoBtn.disabled = this._redoStack.length === 0;
   }
 
+  /* True while a field has focus, where these keys belong to the field rather than the canvas. */
+  _typingInField() {
+    const active = this.shadowRoot.activeElement || document.activeElement;
+    return !!active && /^(INPUT|TEXTAREA|SELECT)$/.test(active.tagName);
+  }
+
   _onKeyDown(e) {
+    if (this._typingInField()) return;
     const meta = e.ctrlKey || e.metaKey;
-    if (!meta) return;
+    if (!meta) {
+      if (e.key === 'Escape') {
+        if (!this._ctxMenu || this._ctxMenu.hidden) {
+          if (!this._selection) return;
+          e.preventDefault();
+          this.reselect();
+          return;
+        }
+        e.preventDefault();
+        this._closeContextMenu();
+      } else if ((e.key === 'Delete' || e.key === 'Backspace') && this._selection) {
+        e.preventDefault();
+        this.deleteSelection();
+      }
+      return;
+    }
     // ctrl/cmd+z -> undo, ctrl/cmd+shift+z or ctrl+ y -> redo
     if (e.key === 'z' || e.key === 'Z') {
       if (e.shiftKey) {
@@ -968,6 +1864,22 @@ class ObjectLayerEngineElement extends HTMLElement {
     } else if (e.key === 'y' || e.key === 'Y') {
       e.preventDefault();
       this.redo();
+    } else if (e.key === 'a' || e.key === 'A') {
+      e.preventDefault();
+      this.setSelectMode(true);
+      this.selectAll();
+    } else if (e.key === 'c' || e.key === 'C') {
+      if (!this._selection) return;
+      e.preventDefault();
+      this.copySelection();
+    } else if (e.key === 'x' || e.key === 'X') {
+      if (!this._selection) return;
+      e.preventDefault();
+      this.cutSelection();
+    } else if (e.key === 'v' || e.key === 'V') {
+      if (!this._clipboard) return;
+      e.preventDefault();
+      this.paste();
     }
   }
 
@@ -1063,15 +1975,11 @@ class ObjectLayerEngineElement extends HTMLElement {
         newMat[newY][newX] = px;
       }
     }
-    this._width = newW;
-    this._height = newH;
     this._matrix = newMat;
-    // keep inputs/attributes in sync
-    if (this._widthInput) this._widthInput.value = String(this._width);
-    if (this._heightInput) this._heightInput.value = String(this._height);
-    this.setAttribute('width', String(this._width));
-    this.setAttribute('height', String(this._height));
+    this._setDimensions(newW, newH);
 
+    this.clearSelection();
+    this._updateSelectionUI();
     this._setupContextsAndSize();
     this.render();
     this.dispatchEvent(
@@ -1094,14 +2002,11 @@ class ObjectLayerEngineElement extends HTMLElement {
         newMat[newY][newX] = px;
       }
     }
-    this._width = newW;
-    this._height = newH;
     this._matrix = newMat;
-    if (this._widthInput) this._widthInput.value = String(this._width);
-    if (this._heightInput) this._heightInput.value = String(this._height);
-    this.setAttribute('width', String(this._width));
-    this.setAttribute('height', String(this._height));
+    this._setDimensions(newW, newH);
 
+    this.clearSelection();
+    this._updateSelectionUI();
     this._setupContextsAndSize();
     this.render();
     this.dispatchEvent(
@@ -1114,19 +2019,26 @@ class ObjectLayerEngineElement extends HTMLElement {
     return this._width;
   }
   set width(v) {
-    this._width = Math.max(1, Math.floor(v));
-    this.setAttribute('width', String(this._width));
-    this._setupContextsAndSize();
-    this.render();
+    this._resizeAxis(v, this._attributeSize('height', this._height));
   }
   get height() {
     return this._height;
   }
   set height(v) {
-    this._height = Math.max(1, Math.floor(v));
-    this.setAttribute('height', String(this._height));
-    this._setupContextsAndSize();
-    this.render();
+    this._resizeAxis(this._attributeSize('width', this._width), v);
+  }
+
+  /* An axis as its attribute states it. While the element upgrades, the attributes are all
+   * present before any setter has run, so the axis not being set is read from here rather than
+   * from a default the resize would otherwise write over the attribute. */
+  _attributeSize(name, fallback) {
+    return parseInt(this.getAttribute(name), 10) || fallback;
+  }
+
+  _resizeAxis(w, h) {
+    const nw = Math.max(1, Math.floor(w));
+    const nh = Math.max(1, Math.floor(h));
+    if (nw !== this._width || nh !== this._height) this.resize(nw, nh);
   }
   get pixelSize() {
     return this._pixelSize;
@@ -1157,6 +2069,8 @@ class ObjectLayerEngineElement extends HTMLElement {
 
 customElements.define('object-layer-engine', ObjectLayerEngineElement);
 
+export { ObjectLayerEngineElement };
+
 /*
 Example usage:
 <object-layer-engine id="ole" width="20" height="12" pixel-size="20"></object-layer-engine>