autumnnote 1.0.3 → 1.0.5

package/src/js/module/ImageTooltip.js

@@ -11,6 +11,9 @@ const ICONS = {
   originalSize:`<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`,
   deleteImg:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>`,
   caption:     `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="11" rx="2"/><line x1="6" y1="18" x2="18" y2="18"/><line x1="9" y1="21" x2="15" y2="21"/></svg>`,
+  rotateLeft:  `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><polyline points="3 3 3 8 8 8"/></svg>`,
+  rotateRight: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><polyline points="21 3 21 8 16 8"/></svg>`,
+  crop:        `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 2 6 18 22 18"/><polyline points="2 6 18 6 18 22"/></svg>`,
 };
 
 const SHOW_DELAY = 100;
@@ -40,13 +43,13 @@ export class ImageTooltip {
         if (img && editable.contains(img) && !img.closest('a[href]')) {
           this._scheduleShow(img);
         }
-      }),
+      }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         const to = e.relatedTarget;
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       // Hide when image is deselected by clicking elsewhere
       on(document, 'click', (e) => {
         if (this._activeImg && !this._activeImg.contains(e.target) && !this._el.contains(e.target)) {
@@ -103,6 +106,16 @@ export class ImageTooltip {
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
+    el.appendChild(this._makeBtn(ICONS.rotateLeft,  'Rotate Left',  () => this._rotate(-90)));
+    el.appendChild(this._makeBtn(ICONS.rotateRight, 'Rotate Right', () => this._rotate(90)));
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
+    this._cropBtn = this._makeBtn(ICONS.crop, 'Crop Image', () => this._crop());
+    el.appendChild(this._cropBtn);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
     this._captionBtn = this._makeBtn(ICONS.caption, 'Add / Edit Caption', () => this._toggleCaption());
     el.appendChild(this._captionBtn);
 
@@ -166,7 +179,10 @@ export class ImageTooltip {
 
   _show(img) {
     this._el.style.display = 'flex';
-    this._positionNear(img);
+    // Defer positioning: offsetWidth on a newly-visible element forces layout
+    requestAnimationFrame(() => {
+      if (this._activeImg) this._positionNear(this._activeImg);
+    });
   }
 
   _hide() {
@@ -213,7 +229,7 @@ export class ImageTooltip {
     target.style.marginRight = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _setCenter() {
@@ -226,7 +242,7 @@ export class ImageTooltip {
     target.style.marginRight  = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _resetSize() {
@@ -236,7 +252,31 @@ export class ImageTooltip {
     img.style.height = '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
+  }
+
+  /**
+   * Rotate the active image by `delta` degrees (±90).
+   * Reads the existing rotate() value from the transform style so
+   * repeated clicks accumulate correctly.
+   * @param {number} delta
+   */
+  _rotate(delta) {
+    const img = this._activeImg;
+    if (!img) return;
+    // Parse current rotation angle from inline transform
+    const current = img.style.transform || '';
+    const match   = current.match(/rotate\((-?[\d.]+)deg\)/);
+    const prev    = match ? parseFloat(match[1]) : 0;
+    const next    = (prev + delta + 360) % 360; // normalise to [0, 360)
+    // Preserve any other transform functions (e.g. scale), replace only rotate()
+    const cleaned = current.replace(/rotate\(-?[\d.]+deg\)/, '').trim();
+    img.style.transform = cleaned
+      ? `${cleaned} rotate(${next}deg)`
+      : next === 0 ? '' : `rotate(${next}deg)`;
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('imageResizer.updateOverlay');
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _delete() {
@@ -253,6 +293,15 @@ export class ImageTooltip {
     this.context.invoke('editor.afterCommand');
   }
 
+  _crop() {
+    const img = this._activeImg;
+    if (!img) return;
+    // Hide the tooltip while the crop overlay is active
+    this._hide();
+    // Delegate to imageCropOverlay module
+    this.context.invoke('imageCropOverlay.open', img);
+  }
+
   _toggleCaption() {
     const img = this._activeImg;
     if (!img) return;

package/src/js/module/ShortcutsDialog.js

@@ -46,7 +46,7 @@ const SHORTCUTS = [
   {
     category: 'Editor',
     items: [
-      { keys: 'Shift + ?', action: 'Show this keyboard shortcuts dialog' },
+      { keys: 'Ctrl + Shift + /', action: 'Show this keyboard shortcuts dialog' },
     ],
   },
 ];

package/src/js/module/TableTooltip.js

@@ -110,7 +110,7 @@ export class TableTooltip {
           if (cell) this._activeCell = cell;
           this._scheduleShow(table);
         }
-      }),
+      }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         const to = e.relatedTarget;
         if (!to || (
@@ -120,7 +120,7 @@ export class TableTooltip {
         )) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       on(document, 'click', (e) => {
         if (this._activeTable &&
           !this._activeTable.contains(e.target) &&
@@ -155,8 +155,11 @@ export class TableTooltip {
     let _startW   = 0;
     let _startH   = 0;
     let _colIdx   = -1;
+    let _colCells = null; // cells cached at drag-start — avoids querySelectorAll every frame
     let _row      = null;
     let _table    = null;
+    let _rafDocMove    = null; // pending rAF handle for resize drag
+    let _rafEditorMove = null; // pending rAF handle for cursor detection
 
     const clearHover = () => {
       if (_nearCell) { _nearCell.style.cursor = ''; _nearCell = null; }
@@ -165,27 +168,29 @@ export class TableTooltip {
 
     const onEditorMove = (e) => {
       if (_resizing) return;
-      const cell = e.target.closest('td, th');
-      if (!cell || !editable.contains(cell)) { clearHover(); return; }
-      if (_nearCell && _nearCell !== cell) {
-        _nearCell.style.cursor = '';
-      }
-      const rect    = cell.getBoundingClientRect();
-      const onRight  = Math.abs(e.clientX - rect.right)  < HIT;
-      const onBottom = Math.abs(e.clientY - rect.bottom) < HIT;
-      if (onRight && onBottom) {
-        // Corner — prefer col-resize
-        cell.style.cursor = 'col-resize';
-        _nearCell = cell; _nearEdge = 'col';
-      } else if (onRight) {
-        cell.style.cursor = 'col-resize';
-        _nearCell = cell; _nearEdge = 'col';
-      } else if (onBottom) {
-        cell.style.cursor = 'row-resize';
-        _nearCell = cell; _nearEdge = 'row';
-      } else {
-        clearHover();
-      }
+      // Throttle to one check per animation frame — getBoundingClientRect forces reflow
+      if (_rafEditorMove !== null) return;
+      const target  = e.target;
+      const clientX = e.clientX;
+      const clientY = e.clientY;
+      _rafEditorMove = requestAnimationFrame(() => {
+        _rafEditorMove = null;
+        const cell = target.closest('td, th');
+        if (!cell || !editable.contains(cell)) { clearHover(); return; }
+        if (_nearCell && _nearCell !== cell) _nearCell.style.cursor = '';
+        const rect     = cell.getBoundingClientRect();
+        const onRight  = Math.abs(clientX - rect.right)  < HIT;
+        const onBottom = Math.abs(clientY - rect.bottom) < HIT;
+        if (onRight) {
+          cell.style.cursor = 'col-resize';
+          _nearCell = cell; _nearEdge = 'col';
+        } else if (onBottom) {
+          cell.style.cursor = 'row-resize';
+          _nearCell = cell; _nearEdge = 'row';
+        } else {
+          clearHover();
+        }
+      });
     };
 
     const onEditorDown = (e) => {
@@ -196,8 +201,14 @@ export class TableTooltip {
       _startY   = e.clientY;
       _table    = _nearCell.closest('table');
       if (_edge === 'col') {
-        _startW = _nearCell.offsetWidth;
-        _colIdx = getVisualColIndex(_nearCell);
+        _startW   = _nearCell.offsetWidth;
+        _colIdx   = getVisualColIndex(_nearCell);
+        // Cache column cells once so onDocMove never runs querySelectorAll per frame
+        _colCells = _colIdx >= 0
+          ? Array.from(_table.querySelectorAll('tr'))
+              .map(r => getCellAtVisualCol(r, _colIdx))
+              .filter(Boolean)
+          : [];
         document.body.style.cursor = 'col-resize';
       } else {
         _row    = _nearCell.closest('tr');
@@ -211,34 +222,42 @@ export class TableTooltip {
 
     const onDocMove = (e) => {
       if (!_resizing) return;
-      if (_edge === 'col') {
-        const newW = Math.max(30, _startW + (e.clientX - _startX));
-        if (_table && _colIdx >= 0) {
-          Array.from(_table.querySelectorAll('tr')).forEach((r) => {
-            const c = getCellAtVisualCol(r, _colIdx);
-            if (c) { c.style.width = `${newW}px`; c.style.minWidth = `${newW}px`; }
-          });
-        }
-      } else {
-        const newH = Math.max(20, _startH + (e.clientY - _startY));
-        if (_row) {
-          Array.from(_row.cells).forEach((c) => {
-            c.style.height    = `${newH}px`;
-            c.style.minHeight = `${newH}px`;
-          });
+      // Skip if a frame is already scheduled — avoids per-pixel style thrashing
+      if (_rafDocMove !== null) return;
+      const clientX = e.clientX;
+      const clientY = e.clientY;
+      _rafDocMove = requestAnimationFrame(() => {
+        _rafDocMove = null;
+        if (_edge === 'col') {
+          const newW = Math.max(30, _startW + (clientX - _startX));
+          for (const c of _colCells) {
+            c.style.width    = `${newW}px`;
+            c.style.minWidth = `${newW}px`;
+          }
+        } else {
+          const newH = Math.max(20, _startH + (clientY - _startY));
+          if (_row) {
+            for (const c of _row.cells) {
+              c.style.height    = `${newH}px`;
+              c.style.minHeight = `${newH}px`;
+            }
+          }
         }
-      }
+      });
     };
 
     const onDocUp = () => {
       if (!_resizing) return;
+      // Cancel any in-flight rAF so stale writes don't land after mouseup
+      if (_rafDocMove !== null) { cancelAnimationFrame(_rafDocMove); _rafDocMove = null; }
       _resizing = false;
       document.body.style.userSelect = '';
       document.body.style.cursor     = '';
-      _edge   = null;
-      _table  = null;
-      _row    = null;
-      _colIdx = -1;
+      _edge     = null;
+      _table    = null;
+      _row      = null;
+      _colIdx   = -1;
+      _colCells = null;
       this.context.invoke('editor.afterCommand');
     };
 
@@ -375,7 +394,10 @@ export class TableTooltip {
   _show() {
     if (!this._activeTable) return;
     this._el.style.display = 'flex';
-    this._positionNear(this._activeTable);
+    // Defer: offsetWidth on a newly-visible element forces layout synchronously
+    requestAnimationFrame(() => {
+      if (this._activeTable) this._positionNear(this._activeTable);
+    });
   }
 
   _hide() {
@@ -452,7 +474,8 @@ export class TableTooltip {
     }
     if (position === 'above') row.parentElement?.insertBefore(newRow, row);
     else row.insertAdjacentElement('afterend', newRow);
-    this._positionNear(this._activeTable);
+    // Defer positioning until the browser has painted the new layout
+    requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
 
@@ -462,18 +485,16 @@ export class TableTooltip {
     const table = cell.closest('table');
     if (!table) return;
     const visualColIdx = getVisualColIndex(cell);
-    Array.from(table.querySelectorAll('tr')).forEach((r) => {
-      const isHeader = r.closest('thead') !== null;
-      const newCell = createElement(isHeader ? 'th' : 'td', {}, ['\u00a0']);
-      if (position === 'left') {
-        const ref = getCellAtVisualCol(r, visualColIdx);
-        r.insertBefore(newCell, ref);
-      } else {
-        const ref = getCellAfterVisualCol(r, visualColIdx);
-        r.insertBefore(newCell, ref);
-      }
+    const rows = Array.from(table.querySelectorAll('tr'));
+    // Batch reads first, then writes — prevents layout thrashing inside the loop
+    const refs      = rows.map(r => position === 'left'
+      ? getCellAtVisualCol(r, visualColIdx)
+      : getCellAfterVisualCol(r, visualColIdx));
+    const isHeaders = rows.map(r => r.closest('thead') !== null);
+    rows.forEach((r, i) => {
+      r.insertBefore(createElement(isHeaders[i] ? 'th' : 'td', {}, ['\u00a0']), refs[i]);
     });
-    this._positionNear(this._activeTable);
+    requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
 
@@ -489,7 +510,7 @@ export class TableTooltip {
     if (bodyRows <= 1 && row.closest('tbody')) return;
     this._activeCell = null;
     row.parentElement?.removeChild(row);
-    this._positionNear(this._activeTable);
+    requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
 
@@ -502,11 +523,11 @@ export class TableTooltip {
     if (row && row.cells.length <= 1) return;
     const visualColIdx = getVisualColIndex(cell);
     this._activeCell = null;
-    Array.from(table.querySelectorAll('tr')).forEach((r) => {
-      const c = getCellAtVisualCol(r, visualColIdx);
-      if (c) r.removeChild(c);
-    });
-    this._positionNear(this._activeTable);
+    const rows  = Array.from(table.querySelectorAll('tr'));
+    // Batch reads before writes to avoid forced reflows inside the loop
+    const cells = rows.map(r => getCellAtVisualCol(r, visualColIdx));
+    cells.forEach((c, i) => { if (c) rows[i].removeChild(c); });
+    requestAnimationFrame(() => this._positionNear(this._activeTable));
     this.context.invoke('editor.afterCommand');
   }
 
@@ -628,15 +649,19 @@ export class TableTooltip {
 
     this._sizeApply = (val) => {
       if (isCol) {
-        const table       = cell.closest('table');
+        const table        = cell.closest('table');
         const visualColIdx = getVisualColIndex(cell);
-        Array.from(table.querySelectorAll('tr')).forEach((r) => {
-          const c = getCellAtVisualCol(r, visualColIdx);
+        const rows  = Array.from(table.querySelectorAll('tr'));
+        // Batch reads, then writes
+        const cells = rows.map(r => getCellAtVisualCol(r, visualColIdx));
+        cells.forEach(c => {
           if (c) { c.style.width = `${val}px`; c.style.minWidth = `${val}px`; }
         });
       } else {
         const row = cell.closest('tr');
-        if (row) Array.from(row.cells).forEach((c) => { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; });
+        if (row) {
+          for (const c of row.cells) { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; }
+        }
       }
       this.context.invoke('editor.afterCommand');
     };

package/src/js/module/VideoResizer.js

@@ -32,6 +32,12 @@ export class VideoResizer {
 
     const editable = this.context.layoutInfo.editable;
 
+    let _resizeDebounce = null;
+    const onWindowResize = () => {
+      clearTimeout(_resizeDebounce);
+      _resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
+    };
+
     this._disposers.push(
       on(editable, 'click', (e) => this._onEditorClick(e)),
       on(editable, 'contextmenu', (e) => {
@@ -40,7 +46,7 @@ export class VideoResizer {
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
       on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', () => this._updateOverlayPosition()),
+      on(window, 'resize', onWindowResize),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
     );
 
@@ -192,43 +198,49 @@ export class VideoResizer {
     const isCorner = pos.length === 2;
 
     const editable = this.context.layoutInfo.editable;
+    let _raf = null; // rAF handle — at most one write per paint frame
+
     const onMove = (me) => {
-      const dx = me.clientX - startX;
-      const dy = me.clientY - startY;
-      const maxW = editable.clientWidth || Infinity;
-      let newW = startW;
-      let newH = startH;
-
-      if (pos.includes('e')) newW = Math.max(80, startW + dx);
-      if (pos.includes('w')) newW = Math.max(80, startW - dx);
-      if (pos.includes('s')) newH = Math.max(45, startH + dy);
-      if (pos.includes('n')) newH = Math.max(45, startH - dy);
-
-      // Clamp to container width
-      newW = Math.min(newW, maxW);
-
-      if (isCorner) {
-        if (Math.abs(dx) >= Math.abs(dy)) {
-          newH = Math.max(45, Math.round(newW / aspectRatio));
-        } else {
-          newW = Math.min(Math.max(80, Math.round(newH * aspectRatio)), maxW);
-          newH = Math.max(45, Math.round(newW / aspectRatio));
+      if (_raf !== null) return;
+      const clientX = me.clientX;
+      const clientY = me.clientY;
+      _raf = requestAnimationFrame(() => {
+        _raf = null;
+        const dx = clientX - startX;
+        const dy = clientY - startY;
+        const maxW = editable.clientWidth || Infinity;
+        let newW = startW;
+        let newH = startH;
+
+        if (pos.includes('e')) newW = Math.max(80, startW + dx);
+        if (pos.includes('w')) newW = Math.max(80, startW - dx);
+        if (pos.includes('s')) newH = Math.max(45, startH + dy);
+        if (pos.includes('n')) newH = Math.max(45, startH - dy);
+
+        newW = Math.min(newW, maxW);
+
+        if (isCorner) {
+          if (Math.abs(dx) >= Math.abs(dy)) {
+            newH = Math.max(45, Math.round(newW / aspectRatio));
+          } else {
+            newW = Math.min(Math.max(80, Math.round(newH * aspectRatio)), maxW);
+            newH = Math.max(45, Math.round(newW / aspectRatio));
+          }
+        }
+
+        // Resize wrapper and inner embed via CSS only — attribute writes are redundant
+        wrapper.style.width  = `${newW}px`;
+        wrapper.style.height = `${newH}px`;
+        if (embed) {
+          embed.style.width  = `${newW}px`;
+          embed.style.height = `${newH}px`;
         }
-      }
-
-      // Resize both the wrapper and the inner embed element
-      wrapper.style.width  = `${newW}px`;
-      wrapper.style.height = `${newH}px`;
-      if (embed) {
-        embed.width  = newW;
-        embed.height = newH;
-        embed.style.width  = `${newW}px`;
-        embed.style.height = `${newH}px`;
-      }
-      this._updateOverlayPosition();
+        this._updateOverlayPosition();
+      });
     };
 
     const onUp = () => {
+      if (_raf !== null) { cancelAnimationFrame(_raf); _raf = null; }
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup', onUp);
       this._dragDisposers = null;

package/src/js/module/VideoTooltip.js

@@ -42,13 +42,13 @@ export class VideoTooltip {
         if (wrapper && editable.contains(wrapper)) {
           this._scheduleShow(wrapper);
         }
-      }),
+      }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         const to = e.relatedTarget;
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       on(document, 'click', (e) => {
         if (
           this._activeWrapper &&
@@ -174,7 +174,10 @@ export class VideoTooltip {
 
   _show(wrapper) {
     this._el.style.display = 'flex';
-    this._positionNear(wrapper);
+    // Defer: offsetWidth on a newly-visible element forces synchronous layout
+    requestAnimationFrame(() => {
+      if (this._activeWrapper) this._positionNear(this._activeWrapper);
+    });
   }
 
   _hide() {
@@ -221,7 +224,7 @@ export class VideoTooltip {
     wrapper.style.marginRight  = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _setCenter() {
@@ -233,7 +236,7 @@ export class VideoTooltip {
     wrapper.style.marginRight = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _resetSize() {
@@ -250,7 +253,7 @@ export class VideoTooltip {
     }
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _delete() {

package/src/styles/autumnnote.scss

@@ -969,6 +969,55 @@
   .an-resize-w  { top: calc(50% - 4px);  left: -4px;             cursor: w-resize;  }
 }
 
+// ---------------------------------------------------------------------------
+// Image crop overlay
+// ---------------------------------------------------------------------------
+
+// The scrim and crop box are appended to <body> and positioned fixed, so they
+// live outside .an-container. All styles are standalone (no SCSS nesting).
+
+.an-crop-scrim {
+  // Inline styles handle position/z-index/background for performance;
+  // clip-path is updated by JS every frame so we only declare the transition.
+  transition: clip-path 0s; // disable transition — updated synchronously on drag
+}
+
+.an-crop-box {
+  // Core layout & interaction via inline styles in JS (position changes every drag frame).
+  // Only declare the animated ring so it stays in sync with $an-primary.
+  outline: none !important;
+
+  // Subtle inner shadow that frames the "live" area
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45),
+              inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+.an-crop-handle {
+  // Inline styles handle size/position; declare hover highlight only.
+  &:hover, &:active {
+    background: #74affa !important; // $an-primary lightened ~14%
+  }
+}
+
+.an-crop-toolbar {
+  // Inline styles handle position; add a subtle entrance animation.
+  animation: an-crop-toolbar-in 0.12s ease;
+}
+
+@keyframes an-crop-toolbar-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+// Hide canvas-based crop overlay when printing
+@media print {
+  .an-crop-scrim,
+  .an-crop-box,
+  .an-crop-toolbar {
+    display: none !important;
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Video resize overlay
 // ---------------------------------------------------------------------------